Component

Admin layout

A layout to be used by admin applications

Typically you’ll use this together with the layout header component and the layout footer component.

Because it is an entire HTML document, this component can only be previewed on a separate page.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

<!DOCTYPE html>
<html lang="en" class="govuk-template">
  <head>
    <meta charset="utf-8" />
    <title>A page title - GOV.UK Publishing</title>
    <meta name="robots" content="noindex,nofollow,noimageindex">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="icon" type="image/x-icon" href="/assets/collections/govuk_publishing_components/favicon-production-e0de5a19794718059fac0d33d2a76a9224571294ae1105f8346aa484bb119926.png" />
    <link rel="stylesheet" href="/assets/collections/application-955785a9b4535aba7f865af73c2f7b5288da599bc61a7cac291259dd0facf952.css" media="all" />
    
  </head>
  <body class="gem-c-layout-for-admin govuk-template__body">
    <script nonce="iJhmXfIgw0Xat6P8mnSMcg==">
//<![CDATA[
      document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');

//]]>
</script>    
      <!-- You probably want to use the header, main & footer components here -->


      <script src="/assets/collections/application-b3b8da6764f0933aa9df8eee6f373b38a0e7fa55babd8c9aa022e7afddaa5492.js"></script>
  </body>
</html>

How to call this component

<%= render "govuk_publishing_components/components/layout_for_admin", {
  environment: "production",
  product_name: "Publishing",
  browser_title: "A page title"
} do %>
  <!-- You probably want to use the header, main & footer components here -->
<% end %>

Accessibility acceptance criteria

The layout template must:

have a lang attribute
contain a skip link
have a sensible page <title>

Other examples

With custom js filename (preview)

An alternative JS filename can be used in place of the default application.js if required (note that this cannot easily be demonstrated here).

<!DOCTYPE html>
<html lang="en" class="govuk-template">
  <head>
    <meta charset="utf-8" />
    <title>A page title - GOV.UK Publishing</title>
    <meta name="robots" content="noindex,nofollow,noimageindex">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="icon" type="image/x-icon" href="/assets/collections/govuk_publishing_components/favicon-production-e0de5a19794718059fac0d33d2a76a9224571294ae1105f8346aa484bb119926.png" />
    <link rel="stylesheet" href="/assets/collections/application-955785a9b4535aba7f865af73c2f7b5288da599bc61a7cac291259dd0facf952.css" media="all" />
    
  </head>
  <body class="gem-c-layout-for-admin govuk-template__body">
    <script nonce="iJhmXfIgw0Xat6P8mnSMcg==">
//<![CDATA[
      document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');

//]]>
</script>    
      <!-- You probably want to use the header, main & footer components here -->


      <script src="/assets/collections/application-b3b8da6764f0933aa9df8eee6f373b38a0e7fa55babd8c9aa022e7afddaa5492.js"></script>
  </body>
</html>

<%= render "govuk_publishing_components/components/layout_for_admin", {
  environment: "production",
  product_name: "Publishing",
  browser_title: "A page title",
  js_filename: "application"
} do %>
  <!-- You probably want to use the header, main & footer components here -->
<% end %>

With custom js filename for es6 components (preview)

An alternative JS filename can be used in place of the default es6-components.js if required (note that this cannot easily be demonstrated here).

<!DOCTYPE html>
<html lang="en" class="govuk-template">
  <head>
    <meta charset="utf-8" />
    <title>A page title - GOV.UK Publishing</title>
    <meta name="robots" content="noindex,nofollow,noimageindex">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="icon" type="image/x-icon" href="/assets/collections/govuk_publishing_components/favicon-production-e0de5a19794718059fac0d33d2a76a9224571294ae1105f8346aa484bb119926.png" />
    <link rel="stylesheet" href="/assets/collections/application-955785a9b4535aba7f865af73c2f7b5288da599bc61a7cac291259dd0facf952.css" media="all" />
    
  </head>
  <body class="gem-c-layout-for-admin govuk-template__body">
    <script nonce="iJhmXfIgw0Xat6P8mnSMcg==">
//<![CDATA[
      document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');

//]]>
</script>    
      <!-- You probably want to use the header, main & footer components here -->


      <script src="/assets/collections/application-b3b8da6764f0933aa9df8eee6f373b38a0e7fa55babd8c9aa022e7afddaa5492.js"></script>
  </body>
</html>

<%= render "govuk_publishing_components/components/layout_for_admin", {
  environment: "production",
  product_name: "Publishing",
  browser_title: "A page title",
  js_module_filename: "es6-bundle"
} do %>
  <!-- You probably want to use the header, main & footer components here -->
<% end %>

With custom css filename (preview)

An alternative JS filename can be used in place of the default application.scss if required (note that this cannot easily be demonstrated here).

<!DOCTYPE html>
<html lang="en" class="govuk-template">
  <head>
    <meta charset="utf-8" />
    <title>A page title - GOV.UK Publishing</title>
    <meta name="robots" content="noindex,nofollow,noimageindex">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="icon" type="image/x-icon" href="/assets/collections/govuk_publishing_components/favicon-production-e0de5a19794718059fac0d33d2a76a9224571294ae1105f8346aa484bb119926.png" />
    <link rel="stylesheet" href="/assets/collections/application-955785a9b4535aba7f865af73c2f7b5288da599bc61a7cac291259dd0facf952.css" media="all" />
    
  </head>
  <body class="gem-c-layout-for-admin govuk-template__body">
    <script nonce="iJhmXfIgw0Xat6P8mnSMcg==">
//<![CDATA[
      document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');

//]]>
</script>    
      <!-- You probably want to use the header, main & footer components here -->


      <script src="/assets/collections/application-b3b8da6764f0933aa9df8eee6f373b38a0e7fa55babd8c9aa022e7afddaa5492.js"></script>
  </body>
</html>

<%= render "govuk_publishing_components/components/layout_for_admin", {
  environment: "production",
  product_name: "Publishing",
  browser_title: "A page title",
  css_filename: "application"
} do %>
  <!-- You probably want to use the header, main & footer components here -->
<% end %>

With type module (preview)

Adds ‘type=module’ to the javascript_include_tag. By default, use_type_module is false.

<!DOCTYPE html>
<html lang="en" class="govuk-template">
  <head>
    <meta charset="utf-8" />
    <title>A page title - GOV.UK Publishing</title>
    <meta name="robots" content="noindex,nofollow,noimageindex">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="icon" type="image/x-icon" href="/assets/collections/govuk_publishing_components/favicon-production-e0de5a19794718059fac0d33d2a76a9224571294ae1105f8346aa484bb119926.png" />
    <link rel="stylesheet" href="/assets/collections/application-955785a9b4535aba7f865af73c2f7b5288da599bc61a7cac291259dd0facf952.css" media="all" />
    
  </head>
  <body class="gem-c-layout-for-admin govuk-template__body">
    <script nonce="iJhmXfIgw0Xat6P8mnSMcg==">
//<![CDATA[
      document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');

//]]>
</script>    
      <!-- You probably want to use the header, main & footer components here -->


      <script src="/assets/collections/application-b3b8da6764f0933aa9df8eee6f373b38a0e7fa55babd8c9aa022e7afddaa5492.js" type="module"></script>
  </body>
</html>

<%= render "govuk_publishing_components/components/layout_for_admin", {
  environment: "production",
  product_name: "Publishing",
  browser_title: "A page title",
  use_type_module: true
} do %>
  <!-- You probably want to use the header, main & footer components here -->
<% end %>