Image card example

With data attributes

Data attributes can be applied as required. Note that the component does not include built in tracking. If this is required consider using the track click script.

How it looks (preview)

A link with tracking

• Another link with tracking

How to call this example

<div class="govuk-!-width-one-third">
  <%= render "govuk_publishing_components/components/image_card", {
  href: "/i-am-not-a-valid-link",
  href_data_attributes: {
    track_category: "href_category",
    track_action: 1.1,
    track_label: "href_label",
    track_options: {
      dimension28: 1,
      dimension29: "dimension29Href"
    }
  },
  image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG",
  image_alt: "some meaningful alt text please",
  heading_text: "A link with tracking",
  extra_details: [
    {
      text: "Another link with tracking",
      href: "/1",
      data_attributes: {
        track_category: "extra_category",
        track_action: 2.1,
        track_label: "extra_label",
        track_options: {
          dimension28: 1,
          dimension29: "dimension29Extra"
        }
      }
    }
  ]
} %>
</div>