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" />
    <script src="/assets/collections/govuk_publishing_components/vendor/modernizr-4e5b446c733040d9748da2d370da68e7c28448cb92c7232c6481a7b84f1ca96a.js"></script>
    
  </head>
  <body class="gem-c-layout-for-admin govuk-template__body">
    <script nonce="AYhwWctr5kZyWbyHpvBpDg==">
//<![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-42bac792f29a96815396d43d575c53f85441cec4401d2835040e3011932606d4.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>