Impact header example

Legacy layout

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.

How it looks (preview)

How to call this example

<%= 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"
    }
  }
} %>