Flexible section

Rich contents list

Wraps the contents list component

See the contents list component for more details of what can be passed to the contents list.

Overview

How it looks (preview) (preview all)

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/rich_contents_list", {
  contents_list: [
    {
      id: "introduction",
      text: "Introduction"
    },
    {
      id: "take-the-tour",
      text: "Explore 10 Downing Street"
    },
    {
      id: "origins-and-early-inhabitants",
      text: "Origins and early inhabitants"
    }
  ]
} %>

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 image (preview)

<div class="govuk-!-width-one-third">
  <%= render "flexible_page/flexible_sections/rich_contents_list", {
  image: {
    src: "https://www.gov.uk/assets/government-frontend/history/buildings/number-10-300-00aa6cc4623aff497a924d2742fa5087533221bb81c65b88fa1d11a1fc942567.jpg",
    alt: "The front door of 10 Downing Street"
  },
  contents_list: [
    {
      id: "introduction",
      text: "Introduction"
    },
    {
      id: "take-the-tour",
      text: "Explore 10 Downing Street"
    },
    {
      id: "origins-and-early-inhabitants",
      text: "Origins and early inhabitants"
    }
  ]
} %>
</div>