1. Component Guide
  2. Cards (experimental)
  3. Two column layout
Cards (experimental) example

Two column layout

Override default three column layout on desktop by passing through two_column_layout parameter (defaults to false).

How it looks (preview)

How to call this example

<%= render "govuk_publishing_components/components/cards", {
  two_column_layout: true,
  items: [
    {
      link: {
        text: "Benefits",
        path: "http://www.gov.uk"
      },
      description: "Includes eligibility, appeals, tax credits and Universal Credit"
    },
    {
      link: {
        text: "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: "Citizenship and living in the&nbsp;UK",
        path: "http://www.gov.uk"
      },
      description: "Voting, community participation, life in the UK, international projects"
    },
    {
      link: {
        text: "Crime, justice and the&nbsp;law",
        path: "http://www.gov.uk"
      },
      description: "Legal processes, courts and the police"
    },
    {
      link: {
        text: "Disabled people",
        path: "http://www.gov.uk"
      },
      description: "Includes carers, your rights, benefits and the Equality Act"
    }
  ]
} %>