Cards example

In one third column

How it looks (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.

How to call this example

<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>