1. Component Guide
  2. Image card
  3. With lazy loading
Image card example

With lazy loading

The image can have an attribute of lazy loading. Defaults to auto if not passed.

How it looks (preview)

How to call this example

<div class="govuk-!-width-one-third">
  <%= render "govuk_publishing_components/components/image_card", {
  href: "/really-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",
  image_loading: "lazy",
  heading_text: "I am not a heading",
  heading_level: 0
} %>
</div>