Cards example

One column layout without heading

No border at the top of the list of cards is present when using a one column layout without a heading. The first card item will still include a top border when using a 2 or 3 column layout as shown in the examples below.

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", {
  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"
    }
  ]
} %>