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>
  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`
    data:
      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
  omit_feedback:
    description: This allows the feedback form to be omitted
    data:
      omit_feedback_form: 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_bar: <div class="govuk-!-padding-top-5 govuk-!-padding-bottom-3">This is the global bar 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_bar: <div class="govuk-!-padding-top-5 govuk-!-padding-bottom-3">This is the global bar 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:
              track_category: cookieBanner
          no:
            text: No
            data_attributes:
              track-category: cookieBanner
          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