1. Component Guide
  2. Admin layout
  3. With custom css filename
Admin layout example

With custom css filename

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

How it looks (preview) 

<!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="xL5pNmTl7eKs_hgcw6i1VQpmfynOGI-AScT6oEeoHNvcpGtvoDRwVls0NJnpXtVnul3I4Z3_athDC67oyS9CTA" />
    <link rel="icon" type="image/x-icon" href="/assets/govuk_publishing_components/favicon-production-4a099aebc01225747f057d807a1d2a3c9bda85d3a5f7d8239902de140da9f451.png" />
    <link rel="stylesheet" href="/assets/application-b02a438c802d6f3cedea3a7aa37db4928d7ca84dd419667cd82cb5e840d04c53.css" media="all" />
    <script src="/assets/govuk_publishing_components/vendor/modernizr-a694b2e4420935261ee2a50f5702d93197f5207f75a24a6ecdae2bfea4a160a3.js"></script>
    
  </head>
  <body class="gem-c-layout-for-admin govuk-template__body">
    <script nonce="gUpvfkqWWUXLgE/gSOFSaA==">
//<![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/application-a543a1523a9627cb1272fea97e6c467538761fc49553da64c7cfa04476928607.js"></script>
  </body>
</html>

How to call this example

<%= 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 %>