1. Component Guide
  2. Admin layout (experimental)

Component

Admin layout (experimental)

A layout to be used by admin applications

This component is experimental. Breaking changes are likely and we’ll not release major version of the gem for these changes. 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.

Inside this component you can use a number of classes provided by govuk-frontend:

Be very careful when using one of these classes, prefer to use a component instead of consuming govuk-frontend directly.

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 %>
Search for usage on GitHub

How it looks

<!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">
    <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="ANeSSAp/eJXKj6SHLxkcJAeRkyuS+MvoZ+nubBCTSTcbfCq1AqjjMa5WsxsXyaiJK5kW7gXpPy/5WajngFRYWA==" />
    <link rel="shortcut icon" type="image/x-icon" href="/assets/govuk_publishing_components/favicon-production-3d29621e53fc949f82338b9efeaeaa1a803066deef2e8e6b390c23d79c21c90b.png" />
    <link rel="stylesheet" media="screen" href="/assets/application-4bedc496645d2169778306149bd40cefb47286c8753133bfc46b77cc10785965.css" />
    <script src="/assets/govuk_publishing_components/vendor/modernizr-a694b2e4420935261ee2a50f5702d93197f5207f75a24a6ecdae2bfea4a160a3.js"></script>
    
  </head>
  <body class="gem-c-layout-for-admin govuk-template__body">
    <script>
      document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
    </script>
    
      <!-- You probably want to use the header, main & footer components here -->


    <script src="/assets/application-1a41ce2bb83829400cf0f512dff175baa9f7d0d0bf3479b184fd10558a650c1f.js"></script>
  </body>
</html>

Accessibility acceptance criteria

TBD