Flexible section

Cards

A layout of boxes that adapts to both the screen size and the column size it is placed within.

This flexible section is not a wrapper for the cards component, although it is styled to mimic its appearance.

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

With custom heading level (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).

<%= render "flexible_page/flexible_sections/cards", {
  heading_level: 4,
  items: [
    {
      title: "Writing implements",
      href: "/example",
      description: "Pens, pencils, markers, crayons, chalk."
    },
    {
      title: "Bones present in the human foot",
      href: "/example",
      description: "Talus, Calcaneus, Cuboid, Cuneiforms, Navicular, Metatarsals, Phalanges."
    },
    {
      title: "Fruit",
      href: "/example",
      description: "The seed-bearing structure in flowering plants (angiosperms)."
    }
  ]
} %>