Image card example

With ga4 tracking

The component does not include an option for GA4 tracking, but data attributes to enable the GA4 link tracker can be passed as shown.

How it looks (preview)

News headline

How to call this example

<div class="govuk-!-width-one-third">
  <%= render "govuk_publishing_components/components/image_card", {
  href: "/not-a-page",
  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: "News headline",
  data_attributes: {
    module: "ga4-link-tracker",
    ga4_link: {
      event_name: "navigation",
      type: "homepage",
      index_section: 1,
      index_link: 1,
      index_section_count: 1,
      index_total: 1,
      section: "homepage"
    }
  }
} %>
</div>