Sha256: 5cbd6314eb734109c9a5ae4d691acc0c0d7f44d8a77879d086a63144f2d10043

Contents?: true

Size: 1.97 KB

Versions: 45

Compression:

Stored size: 1.97 KB

Contents

name: Layout header
description: The header provides the crown logo, product or service name and navigation
body: |
  Requires the specification of the environment (development, integration,
  staging or production).
govuk_frontend_components:
  - header
accessibility_excluded_rules:
  - landmark-banner-is-top-level # The header element can not be top level in the examples
examples:
  default:
    data:
      environment: production
  staging_environment:
    data:
      environment: staging
  integration_environment:
    data:
      environment: integration
  development_environment:
    data:
      environment: development
  with_product_name:
    data:
      environment: production
      product_name: Product
  with_navigation:
    data:
      environment: production
      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
  full_width:
    description: |
      This is difficult to preview because the preview windows are constrained, but the header will stretch to the size of its container.
    data:
      environment: production
      full_width: true

accessibility_criteria: |
  The component must:

  - have a text contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast)

  Links in the Header must:

  - accept focus
  - be focusable with a keyboard
  - be usable with a keyboard
  - indicate when they have focus
  - change in appearance when touched (in the touch-down state)
  - change in appearance when hovered
  - have visible text

  Images in the Header must:

  - be presentational when linked to from accompanying text (crown icon).

  Landmarks and Roles in the Header should:

  - have a role of `banner` at the root of the component (<header>) ([ARIA 1.1](https://www.w3.org/TR/wai-aria-1.1/#banner))

Version data entries

45 entries across 45 versions & 1 rubygems

Version Path
govuk_publishing_components-21.13.5 app/views/govuk_publishing_components/components/docs/layout_header.yml
govuk_publishing_components-21.13.4 app/views/govuk_publishing_components/components/docs/layout_header.yml
govuk_publishing_components-21.13.3 app/views/govuk_publishing_components/components/docs/layout_header.yml
govuk_publishing_components-21.13.2 app/views/govuk_publishing_components/components/docs/layout_header.yml
govuk_publishing_components-21.13.1 app/views/govuk_publishing_components/components/docs/layout_header.yml