Component

Impact header

Provides a title and image for a page

The impact header is designed to fill the full width of the page. Here in the component guide it is shown within a full width page element, but using it in an application is different. It will either need to be used outside of the normal govuk-width-container element, or wrapped in a full width class such as .full-width__element.

The component expects to receive images of a specific size.

  • mobile: 640 x 360
  • mobile (x2): 1280 x 720
  • tablet: 768 x 432
  • tablet (x2): 1536 x 864
  • desktop: 512 x 512
  • desktop (x2): 1024 x 1024

Search for usage of this component on GitHub.

Overview

How it looks (preview) (preview all)

This is the title of the impact header

This is the description of the impact header, containing words that form a paragraph of text.

How to call this component

<%= render "components/impact_header", {
  heading: "This is the title of the impact header",
  description: "This is the description of the impact header, containing words that form a paragraph of text.",
  image: {
    sources: {
      desktop: "/assets/frontend/flexible-pages/example_desktop_1x.jpg",
      desktop_2x: "/assets/frontend/flexible-pages/example_desktop_2x.jpg",
      mobile: "/assets/frontend/flexible-pages/example_mobile_1x.jpg",
      mobile_2x: "/assets/frontend/flexible-pages/example_mobile_2x.jpg",
      tablet: "/assets/frontend/flexible-pages/example_tablet_1x.jpg",
      tablet_2x: "/assets/frontend/flexible-pages/example_tablet_2x.jpg"
    }
  }
} %>

Accessibility acceptance criteria

  • Images in the impact header should have an empty alt text, as appropriate for purely decorative images
  • The ‘image details’ disclosure element should be operable with a keyboard and understood by screen reader users

Links 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
  • be usable with touch
  • be usable with voice commands
  • have visible text
  • have meaningful text

Other examples

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

See all standard options
  • id - accepts a string for the element ID attribute
  • data_attributes - accepts a hash of data attributes
  • aria - accepts a hash of aria attributes
  • classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
  • margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale
  • role - accepts a space separated string of roles
  • lang - accepts a language attribute value
  • open - accepts an open attribute value (true or false)
  • hidden - accepts an empty string, ‘hidden’, or ‘until-found’
  • tabindex - accepts an integer. The integer can also be passed as a string
  • dir - accepts ‘rtl’, ‘ltr’, or ‘auto’
  • type - accepts any valid type attribute e.g. ‘button’, ‘submit’, ‘text’
  • rel - accepts any valid rel attribute e.g. ‘nofollow’
  • target - accepts a valid target attribute e.g. ‘_blank’
  • title - accepts any string
  • draggable - accepts a draggable attribute value (“true” or “false”)

With image caption (preview)

With image caption

This is the description of the impact header, containing words that form a paragraph of text.

Image details
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
<%= render "components/impact_header", {
  heading: "With image caption",
  description: "This is the description of the impact header, containing words that form a paragraph of text.",
  image: {
    caption: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    sources: {
      desktop: "/assets/frontend/flexible-pages/example_desktop_1x.jpg",
      desktop_2x: "/assets/frontend/flexible-pages/example_desktop_2x.jpg",
      mobile: "/assets/frontend/flexible-pages/example_mobile_1x.jpg",
      mobile_2x: "/assets/frontend/flexible-pages/example_mobile_2x.jpg",
      tablet: "/assets/frontend/flexible-pages/example_tablet_1x.jpg",
      tablet_2x: "/assets/frontend/flexible-pages/example_tablet_2x.jpg"
    }
  }
} %>

With excessive text (preview)

When there is excessive text in the left side of the impact header the image on the right is aligned to the bottom of the flexible section.

This is the title of the impact header when there is a lot of text involved

The layout needs to adapt if the text of this description is very long. The layout also needs to account for where users have set a default large text size in their browser. In both cases, this text would be taller than the image. If the layout tried to keep the image the same height as the text it would result in more of the sides of the image being hidden as the image gets taller. Instead, the image is given a maximum height and vertically aligned centrally within the space available.

Image details
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
<%= render "components/impact_header", {
  heading: "This is the title of the impact header when there is a lot of text involved",
  description: "The layout needs to adapt if the text of this description is very long. The layout also needs to account for where users have set a default large text size in their browser. In both cases, this text would be taller than the image. If the layout tried to keep the image the same height as the text it would result in more of the sides of the image being hidden as the image gets taller. Instead, the image is given a maximum height and vertically aligned centrally within the space available.",
  image: {
    caption: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    sources: {
      desktop: "/assets/frontend/flexible-pages/example_desktop_1x.jpg",
      desktop_2x: "/assets/frontend/flexible-pages/example_desktop_2x.jpg",
      mobile: "/assets/frontend/flexible-pages/example_mobile_1x.jpg",
      mobile_2x: "/assets/frontend/flexible-pages/example_mobile_2x.jpg",
      tablet: "/assets/frontend/flexible-pages/example_tablet_1x.jpg",
      tablet_2x: "/assets/frontend/flexible-pages/example_tablet_2x.jpg"
    }
  }
} %>

Without image (preview)

Where an impact header is provided no image, the component automatically uses a standard GOV.UK two thirds layout, to minimise the large empty space to the right.

No image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

<%= render "components/impact_header", {
  heading: "No image",
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
} %>

Legacy layout (preview)

Where a topical event contains an existing image we apply different styles to the image to prevent any part of it from being hidden. This is because these legacy images often contained text, which should not be cropped.

A legacy layout like this will not show an image caption, even if one is specified.

<%= render "components/impact_header", {
  heading: "Legacy layout",
  description: "Some descriptive text.",
  image_type: "logo",
  image: {
    caption: "Nope",
    sources: {
      desktop: "https://assets.publishing.service.gov.uk/media/5a71e44be5274a7f99028591/s630_ESVIC-Global-_-London_960x6.jpg",
      desktop_2x: "https://assets.publishing.service.gov.uk/media/5a71e44be5274a7f99028591/s630_ESVIC-Global-_-London_960x6.jpg",
      mobile: "https://assets.publishing.service.gov.uk/media/5a71e44be5274a7f99028591/s630_ESVIC-Global-_-London_960x6.jpg",
      mobile_2x: "https://assets.publishing.service.gov.uk/media/5a71e44be5274a7f99028591/s630_ESVIC-Global-_-London_960x6.jpg",
      tablet: "https://assets.publishing.service.gov.uk/media/5a71e44be5274a7f99028591/s630_ESVIC-Global-_-London_960x6.jpg",
      tablet_2x: "https://assets.publishing.service.gov.uk/media/5a71e44be5274a7f99028591/s630_ESVIC-Global-_-London_960x6.jpg"
    }
  }
} %>

Legacy layout with background (preview)

Showing the legacy layout with a background.

<%= render "components/impact_header", {
  heading: "Legacy layout with background",
  description: "Some descriptive text.",
  image_type: "logo",
  variant: "notable-death",
  image: {
    sources: {
      desktop: "https://assets.publishing.service.gov.uk/media/5a71e44be5274a7f99028591/s630_ESVIC-Global-_-London_960x6.jpg",
      desktop_2x: "https://assets.publishing.service.gov.uk/media/5a71e44be5274a7f99028591/s630_ESVIC-Global-_-London_960x6.jpg",
      mobile: "https://assets.publishing.service.gov.uk/media/5a71e44be5274a7f99028591/s630_ESVIC-Global-_-London_960x6.jpg",
      mobile_2x: "https://assets.publishing.service.gov.uk/media/5a71e44be5274a7f99028591/s630_ESVIC-Global-_-London_960x6.jpg",
      tablet: "https://assets.publishing.service.gov.uk/media/5a71e44be5274a7f99028591/s630_ESVIC-Global-_-London_960x6.jpg",
      tablet_2x: "https://assets.publishing.service.gov.uk/media/5a71e44be5274a7f99028591/s630_ESVIC-Global-_-London_960x6.jpg"
    }
  }
} %>

Govuk variant (preview)

Currently unused.

GOVUK variant

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Image details
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
<%= render "components/impact_header", {
  heading: "GOVUK variant",
  variant: "govuk",
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
  image: {
    caption: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    sources: {
      desktop: "/assets/frontend/flexible-pages/example_desktop_1x.jpg",
      desktop_2x: "/assets/frontend/flexible-pages/example_desktop_2x.jpg",
      mobile: "/assets/frontend/flexible-pages/example_mobile_1x.jpg",
      mobile_2x: "/assets/frontend/flexible-pages/example_mobile_2x.jpg",
      tablet: "/assets/frontend/flexible-pages/example_tablet_1x.jpg",
      tablet_2x: "/assets/frontend/flexible-pages/example_tablet_2x.jpg"
    }
  }
} %>

Notable death variant (preview)

Notable death variant

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Image details
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
<%= render "components/impact_header", {
  heading: "Notable death variant",
  variant: "notable-death",
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
  image: {
    caption: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    sources: {
      desktop: "/assets/frontend/flexible-pages/example_desktop_1x.jpg",
      desktop_2x: "/assets/frontend/flexible-pages/example_desktop_2x.jpg",
      mobile: "/assets/frontend/flexible-pages/example_mobile_1x.jpg",
      mobile_2x: "/assets/frontend/flexible-pages/example_mobile_2x.jpg",
      tablet: "/assets/frontend/flexible-pages/example_tablet_1x.jpg",
      tablet_2x: "/assets/frontend/flexible-pages/example_tablet_2x.jpg"
    }
  }
} %>