name: Public layout
description: A layout to be used by public-facing applications
body: |
  Because it is an entire HTML document, this component can only be [previewed on a separate page](/public).

display_preview: false
display_html: true
accessibility_criteria: |
  The layout template must:

    * have a `lang` attribute
    * contain a [skip link](/component-guide/skip_link)
    * have a sensible page `<title>`
examples:
  default:
    data:
      title: 'Example layout'
      block: |
        <h1>Page content goes here</h1>
  with_static_wrapper:
    description: |
      By default, the layout does not include the `div#wrapper` element, nor the `main` element within that.
      This behaviour is peculiar to the one app that currently uses this layout - static. Static now sets the `for_static: true` flag,
      which causes the wrapper to be included. Other apps in the future will not set that flag, but provide their own wrapper and main elements.
    data:
      for_static: true
      block: |
        <h1>Page content goes here</h1>
  full_width:
    description: By default, the layout applies the `govuk-width-container` class to the main element. We can remove this class by setting `full_width` to `true`. Note this also requires the for_static flag, since that is needed for the main element.
    data:
      for_static: true
      full_width: true
      block: |
        <h1>Page content goes here</h1>
  omit_header:
    description: This allows the header to be omitted which is currently used when rendering CSV previews from Whitehall
    data:
      omit_header: true
  blue_bar_background:
    description: For use when a page has a heading component with a background colour.
    data:
      for_static: true
      full_width: true
      blue_bar: true
      blue_bar_background_colour: "no"
  omit_feedback:
    description: This allows the feedback form to be omitted
    data:
      omit_feedback_form: true
  homepage:
    description: This allows for rendering the layout super navigation header in a different way for only the homepage.
    data:
      homepage: true
      show_explore_header: true
  omit_footer_navigation:
    description: This allows the footer navigation to be omitted
    data:
      omit_footer_navigation: true
  navigation:
    description: Passes the navigation through to the [header component](/component-guide/layout_header/).
    data:
      show_search: false
      navigation_items:
      - text: Navigation item 1
        href: "item-1"
        active: true
      - text: Navigation item 2
        href: "item-2"
      - text: Hidden on desktop
        href: "item-3"
        show_only_in_collapsed_menu: true
  with_global_banner:
    description: This allows the HTML for the global banner to be added to the page. This is only the slot for the global banner - the markup for the banner needs to be passed in.
    data:
      global_banner: <div class="govuk-!-padding-top-5 govuk-!-padding-bottom-3">This is the global banner slot</div>
  with_emergency_banner:
    description: This allows the HTML for the emergency banner to be added to the page in the correct place. This is only the slot for the emergency banner - the markup for the banner needs to be passed in.
    data:
      emergency_banner: <div class="govuk-!-padding-top-3 govuk-!-padding-bottom-3">This is the emergency banner slot</div>
  with_global_and_emergency_banner:
    description: Both global banner and emergency banner should be usable together.
    data:
      emergency_banner: <div class="govuk-!-padding-top-3 govuk-!-padding-bottom-3">This is the emergency banner slot</div>
      global_banner: <div class="govuk-!-padding-top-5 govuk-!-padding-bottom-3">This is the global banner slot</div>
  with_account_layout_enabled:
    description: Adds account layout wrapper around the content passed in to the component
    data:
      show_account_layout: true
      block: |
        <h2 class="govuk-heading-l">This is a title</h2>
        <p class="govuk-body">This is some body text with <a href="https://example.com">a link</a>.
  with_current_account_navigation:
    description: "The account layout renders with an account-specific nav to help users navigate different areas of their account. This flag is here to allow control over which option in the nav is highlighted as `current`. Valid options are currently `your-account` and `manage`."
    data:
      show_account_layout: true
      account_nav_location: "manage"
      block: |
        <h2 class="govuk-heading-l">This is a title</h2>
        <p class="govuk-body">This is a page under the "Manage your account" section, so we must highlight "Manage your account" in the account navigation.</p>
  with_account_layout_but_without_account_navigation:
    description: The account layout renders with account navigation by default, this hides it.
    data:
      show_account_layout: true
      omit_account_navigation: true
      block: |
        <h2 class="govuk-heading-l">This is a title</h2>
        <p class="govuk-body">This is some body text with <a href="https://example.com">a link</a>.</p>
  with_account_layout_but_without_account_phase_banner:
    description: The account layout renders with a phase banner by default, this hides it.
    data:
      show_account_layout: true
      omit_account_phase_banner: true
      block: |
        <h2 class="govuk-heading-l">This is a title</h2>
        <p class="govuk-body">This is some body text with <a href="https://example.com">a link</a>.</p>
  with_custom_cookie_banner:
    description: Passes content through to the [cookie banner component](/component-guide/cookie_banner/).
    data:
      cookie_banner_data:
        title: Can we use cookies to collect information about how you use GOV.UK?
        text: Cookies help us see where we can make improvements to GOV.UK.
        confirmation_message: You have accepted cookies.
        cookie_preferences_href: https://www.gov.uk/government/publications/govuk-accounts-trial-full-privacy-notice-and-accessibility-statement
        services_cookies:
          yes:
            text: Yes
            data_attributes:
              an_attribute: some_value1
          no:
            text: No
            data_attributes:
              an_attribute: some_value2
          cookie_preferences:
            text: How GOV.UK accounts use cookies
            href: https://www.gov.uk/government/publications/govuk-accounts-trial-full-privacy-notice-and-accessibility-statement
  with_custom_layout:
    description: Yields a custom layout for the content.
    data:
      custom_layout: true
      block: |
        <main id="custom-layout">
          <h1>This is a custom layout</h1>
        </main>
  with_custom_header:
    description: Allows the header to be replaced with HTML injected by the calling application in a `content_for` tag named `:custom_header`.
    embed: |
      <% content_for(:custom_header) do %>
        <header id="custom-header">I'm a custom header</header>
      <% end %>
      <%= render "govuk_publishing_components/components/layout_for_public", {
      } %>