Sha256: b721bc95ca1d52f620edc1055cbe322a078b3fb51f6d4eaf644a1da041386bad
Contents?: true
Size: 1.84 KB
Versions: 51
Compression:
Stored size: 1.84 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
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: "#1"
active: true
- text: Navigation item 2
href: "#2"
- text: Hidden on desktop
href: "#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
51 entries across 51 versions & 1 rubygems