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