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