Sha256: 19eec30e3693cbd5233e7a26aa56f5788a3ff6a77ede2da249d505ab8bb72f31
Contents?: true
Size: 1.75 KB
Versions: 47
Compression:
Stored size: 1.75 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)
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))
shared_accessibility_criteria:
- link
Version data entries
47 entries across 47 versions & 1 rubygems