Image card example

With srcset

srcset is another responsive images attribute (see sizes section above for info on how responsive images work).

srcset strings typically pull from the asset/images directory of a repo so use this as a starting point when writing paths for your srcset image keys.

Note that the below example will appear to render incorrectly as we don’t want to include srcset example images in our component guide as this will get served to frontend apps, adding weight to the user to download.

How it looks (preview)

News headline

How to call this example

<div class="govuk-!-width-full">
  <%= render "govuk_publishing_components/components/image_card", {
  href: "/not-a-page",
  image_src: "/assets/govuk_publishing_components/image-card-srcset/afghan-image-promo.jpg",
  image_alt: "some meaningful alt text please",
  heading_text: "News headline",
  srcset: {
    "/assets/govuk_publishing_components/image-card-srcset/cop26.jpg": "610w",
    "/assets/govuk_publishing_components/image-card-srcset/cop26-480.jpg": "480w",
    "/assets/govuk_publishing_components/image-card-srcset/cop26-320.jpg": "320w",
    "/assets/govuk_publishing_components/image-card-srcset/cop26-240.jpg": "240w",
    "/assets/govuk_publishing_components/image-card-srcset/cop26-170.jpg": "170w"
  }
} %>
</div>