Image card example

With sizes attribute

sizes is an attribute that makes use of html’s native responsive images functionality.

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",
  sizes: "(max-width: 640px) 100vw, (max-width: 1020px) 33vw, 300px"
} %>
</div>