Cards example

Three column layout

Override default single column layout on desktop by setting the columns parameter to 3.

How it looks (preview)

• Benefits

  Includes eligibility, appeals, tax credits and Universal Credit

• Births, deaths, marriages and care

  Parenting, civil partnerships, divorce and Lasting Power of Attorney

• Business and self-employed

  Tools and guidance for businesses

• Childcare and parenting

  Includes giving birth, fostering, adopting, benefits for children, childcare and schools

• Citizenship and living in the UK

  Voting, community participation, life in the UK, international projects

How to call this example

<%= render "govuk_publishing_components/components/cards", {
  columns: 3,
  items: [
    {
      link: {
        text: "Benefits",
        path: "http://www.gov.uk"
      },
      description: "Includes eligibility, appeals, tax credits and Universal Credit"
    },
    {
      link: {
        text: sanitize("Births, deaths, marriages and&nbsp;care"),
        path: "http://www.gov.uk"
      },
      description: "Parenting, civil partnerships, divorce and Lasting Power of Attorney"
    },
    {
      link: {
        text: "Business and self-employed",
        path: "http://www.gov.uk"
      },
      description: "Tools and guidance for businesses"
    },
    {
      link: {
        text: "Childcare and parenting",
        path: "http://www.gov.uk"
      },
      description: "Includes giving birth, fostering, adopting, benefits for children, childcare and schools"
    },
    {
      link: {
        text: sanitize("Citizenship and living in the&nbsp;UK"),
        path: "http://www.gov.uk"
      },
      description: "Voting, community participation, life in the UK, international projects"
    }
  ]
} %>