Image card example

With sizes attribute

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

Read more about responsive images

How it looks (preview)

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>