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