Flexible section

Impact header

Provides a title and image for a page

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.

Passing data to this flexible section

Flexible sections are not called in the way shown below, however this information serves as a reference for the data required by this flexible section.

<%= render "flexible_page/flexible_sections/impact_header", {
  title: "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

With image caption (preview)

This is the title of the impact header

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 "flexible_page/flexible_sections/impact_header", {
  title: "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: {
    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

<%= render "flexible_page/flexible_sections/impact_header", {
  title: "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"
    }
  }
} %>

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.

Legacy layout

Some descriptive text.

<%= render "flexible_page/flexible_sections/impact_header", {
  title: "Legacy layout",
  description: "Some descriptive text.",
  image_type: "logo",
  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"
    }
  }
} %>

Legacy layout with background (preview)

Showing the legacy layout with a background.

Legacy layout

Some descriptive text.

<%= render "flexible_page/flexible_sections/impact_header", {
  title: "Legacy layout",
  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"
    }
  }
} %>

Without image (preview)

Where an impact header is provided no image, we fall back to a standard GOV.UK two thirds layout for this text, to minimise the large empty space to the right.

Impact header without an image