Flexible section

Featured

Wraps one or more image card components

The Featured flexible section displays a number of image card components. The layout varies slightly depending on the number of image cards.

See the image card component for more details of what can be passed to the image card.

Overview

How it looks (preview) (preview all)

Featured

Government does things

This is what a single featured item looks like.
some meaningful alt text please

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/featured", {
  items: [
    {
      href: "/not-a-page",
      image_alt: "some meaningful alt text please",
      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG",
      description: "This is what a single featured item looks like.",
      heading_text: "Government does things"
    }
  ]
} %>

Accessibility acceptance criteria

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 two or four items (preview)

When there are two or four items in the flexible section they should be displayed two per row.

Featured

Government does things

This is what a single featured item looks like. We also need to test what happens when they're different heights.
some meaningful alt text please

Government does things

This is what a single featured item looks like.
some meaningful alt text please

Government does things

This is what a single featured item looks like.
some meaningful alt text please

Government does things

This is what a single featured item looks like.
some meaningful alt text please
<%= render "flexible_page/flexible_sections/featured", {
  items: [
    {
      href: "/not-a-page",
      image_alt: "some meaningful alt text please",
      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG",
      description: "This is what a single featured item looks like. We also need to test what happens when they're different heights.",
      heading_text: "Government does things"
    },
    {
      href: "/not-a-page",
      image_alt: "some meaningful alt text please",
      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG",
      description: "This is what a single featured item looks like.",
      heading_text: "Government does things"
    },
    {
      href: "/not-a-page",
      image_alt: "some meaningful alt text please",
      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG",
      description: "This is what a single featured item looks like.",
      heading_text: "Government does things"
    },
    {
      href: "/not-a-page",
      image_alt: "some meaningful alt text please",
      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG",
      description: "This is what a single featured item looks like.",
      heading_text: "Government does things"
    }
  ]
} %>

With three items (preview)

When there are three items in the flexible section they should be displayed in a single row.

Featured

Government does things

This is what a single featured item looks like. We also need to test what happens when they're different heights.
some meaningful alt text please

Government does things

This is what a single featured item looks like.
some meaningful alt text please

Government does things

This is what a single featured item looks like.
some meaningful alt text please
<%= render "flexible_page/flexible_sections/featured", {
  items: [
    {
      href: "/not-a-page",
      image_alt: "some meaningful alt text please",
      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG",
      description: "This is what a single featured item looks like. We also need to test what happens when they're different heights.",
      heading_text: "Government does things"
    },
    {
      href: "/not-a-page",
      image_alt: "some meaningful alt text please",
      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG",
      description: "This is what a single featured item looks like.",
      heading_text: "Government does things"
    },
    {
      href: "/not-a-page",
      image_alt: "some meaningful alt text please",
      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG",
      description: "This is what a single featured item looks like.",
      heading_text: "Government does things"
    }
  ]
} %>

With more than four items (preview)

When there are more than four items they are laid out in rows of three.

Featured

Government does things, read all about it

This is what a single featured item looks like.
some meaningful alt text please

Government does things

This is what a single featured item looks like. We also need to test what happens when they're different heights.
some meaningful alt text please

Government does things

This is what a single featured item looks like.
some meaningful alt text please

Government does things

This is what a single featured item looks like.
some meaningful alt text please

Government does things

This is what a single featured item looks like.
some meaningful alt text please
<%= render "flexible_page/flexible_sections/featured", {
  items: [
    {
      href: "/not-a-page",
      image_alt: "some meaningful alt text please",
      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG",
      description: "This is what a single featured item looks like.",
      heading_text: "Government does things, read all about it"
    },
    {
      href: "/not-a-page",
      image_alt: "some meaningful alt text please",
      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG",
      description: "This is what a single featured item looks like. We also need to test what happens when they're different heights.",
      heading_text: "Government does things"
    },
    {
      href: "/not-a-page",
      image_alt: "some meaningful alt text please",
      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG",
      description: "This is what a single featured item looks like.",
      heading_text: "Government does things"
    },
    {
      href: "/not-a-page",
      image_alt: "some meaningful alt text please",
      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG",
      description: "This is what a single featured item looks like.",
      heading_text: "Government does things"
    },
    {
      href: "/not-a-page",
      image_alt: "some meaningful alt text please",
      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG",
      description: "This is what a single featured item looks like.",
      heading_text: "Government does things"
    }
  ]
} %>