Cards example

With data attributes

Data attributes can be passed to individual links within the component as shown.

Note that the component does not include built in tracking. If this is required consider using the GA4 link tracker.

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

How to call this example

<%= render "govuk_publishing_components/components/cards", {
  items: [
    {
      link: {
        text: "Benefits",
        path: "http://www.gov.uk",
        data_attributes: {
          an_attribute: "some_value"
        }
      },
      description: "Includes eligibility, appeals, tax credits and Universal Credit"
    },
    {
      link: {
        text: sanitize("Births, deaths, marriages and&nbsp;care"),
        path: "http://www.gov.uk",
        data_attributes: {
          an_attribute: "some_value"
        }
      },
      description: "Parenting, civil partnerships, divorce and Lasting Power of Attorney"
    }
  ]
} %>