1. Component Guide
  2. Image card
  3. With sizes attribute
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

<%= 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"
} %>