Flexible section

Cards

A wrapper for the cards component

This flexible section wraps the cards component using the auto option for automatic column layout.

Overview

How it looks (preview) (preview all)

• Writing implements

  Pens, pencils, markers, crayons, chalk.

• Bones present in the human foot

  Talus, Calcaneus, Cuboid, Cuneiforms, Navicular, Metatarsals, Phalanges.

• Fruit

  The seed-bearing structure in flowering plants (angiosperms).

• Pixar movies with sequels

  Toy Story, Cars, The Incredibles, Finding Nemo and more.

• Types of brick

  Facing bricks, Common bricks, Engineering bricks, Air bricks, Fire bricks, Concrete blocks, Lego bricks.

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/cards", {
  items: [
    {
      link: {
        text: "Writing implements",
        path: "/example"
      },
      description: "Pens, pencils, markers, crayons, chalk."
    },
    {
      link: {
        text: "Bones present in the human foot",
        path: "/example"
      },
      description: "Talus, Calcaneus, Cuboid, Cuneiforms, Navicular, Metatarsals, Phalanges."
    },
    {
      link: {
        text: "Fruit",
        path: "/example"
      },
      description: "The seed-bearing structure in flowering plants (angiosperms)."
    },
    {
      link: {
        text: "Pixar movies with sequels",
        path: "/example"
      },
      description: "Toy Story, Cars, The Incredibles, Finding Nemo and more."
    },
    {
      link: {
        text: "Types of brick",
        path: "/example"
      },
      description: "Facing bricks, Common bricks, Engineering bricks, Air bricks, Fire bricks, Concrete blocks, Lego bricks."
    }
  ]
} %>

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

In two thirds column (preview)

The flexible section should show boxes of the same width, despite being constrained within a two thirds column. This is handled automatically and does not require any additional configuration.

• Writing implements

  Pens, pencils, markers, crayons, chalk.

• Bones present in the human foot

  Talus, Calcaneus, Cuboid, Cuneiforms, Navicular, Metatarsals, Phalanges.

• Fruit

  The seed-bearing structure in flowering plants (angiosperms).

• Pixar movies with sequels

  Toy Story, Cars, The Incredibles, Finding Nemo and more.

• Types of brick

  Facing bricks, Common bricks, Engineering bricks, Air bricks, Fire bricks, Concrete blocks, Lego bricks.

<div class="govuk-grid-row">
  <div class="govuk-grid-column-two-thirds">
    <%= render "flexible_page/flexible_sections/cards", {
  items: [
    {
      link: {
        text: "Writing implements",
        path: "/example"
      },
      description: "Pens, pencils, markers, crayons, chalk."
    },
    {
      link: {
        text: "Bones present in the human foot",
        path: "/example"
      },
      description: "Talus, Calcaneus, Cuboid, Cuneiforms, Navicular, Metatarsals, Phalanges."
    },
    {
      link: {
        text: "Fruit",
        path: "/example"
      },
      description: "The seed-bearing structure in flowering plants (angiosperms)."
    },
    {
      link: {
        text: "Pixar movies with sequels",
        path: "/example"
      },
      description: "Toy Story, Cars, The Incredibles, Finding Nemo and more."
    },
    {
      link: {
        text: "Types of brick",
        path: "/example"
      },
      description: "Facing bricks, Common bricks, Engineering bricks, Air bricks, Fire bricks, Concrete blocks, Lego bricks."
    }
  ]
} %>
  </div>
</div>

In one third column (preview)

• Writing implements

  Pens, pencils, markers, crayons, chalk.

• Bones present in the human foot

  Talus, Calcaneus, Cuboid, Cuneiforms, Navicular, Metatarsals, Phalanges.

• Fruit

  The seed-bearing structure in flowering plants (angiosperms).

• Pixar movies with sequels

  Toy Story, Cars, The Incredibles, Finding Nemo and more.

• Types of brick

  Facing bricks, Common bricks, Engineering bricks, Air bricks, Fire bricks, Concrete blocks, Lego bricks.

<div class="govuk-grid-row">
  <div class="govuk-grid-column-one-third">
    <%= render "flexible_page/flexible_sections/cards", {
  items: [
    {
      link: {
        text: "Writing implements",
        path: "/example"
      },
      description: "Pens, pencils, markers, crayons, chalk."
    },
    {
      link: {
        text: "Bones present in the human foot",
        path: "/example"
      },
      description: "Talus, Calcaneus, Cuboid, Cuneiforms, Navicular, Metatarsals, Phalanges."
    },
    {
      link: {
        text: "Fruit",
        path: "/example"
      },
      description: "The seed-bearing structure in flowering plants (angiosperms)."
    },
    {
      link: {
        text: "Pixar movies with sequels",
        path: "/example"
      },
      description: "Toy Story, Cars, The Incredibles, Finding Nemo and more."
    },
    {
      link: {
        text: "Types of brick",
        path: "/example"
      },
      description: "Facing bricks, Common bricks, Engineering bricks, Air bricks, Fire bricks, Concrete blocks, Lego bricks."
    }
  ]
} %>
  </div>
</div>