Component

Image card

Image and associated text with a link

An image and links, meant for use for news articles and people. Includes optional paragraph and additional links.

The component is generally to be used within a grid column but has no grid of its own, so the text and the images in the examples below may not always line up. This will normally look tidier, for example on pages like this.

Images should have an aspect ratio of 3:2.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

News headline

some meaningful alt text please

How to call this component

<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"
} %>
</div>

Accessibility acceptance criteria

The component must:

  • include alt text for images when present
  • not have duplicate links for the image and the text
  • if the contents of the component are in a different language than the rest of the document, include an appropriate lang attribute to correctly identify the language used in the component

Links in the component must:

  • accept focus
  • be focusable with a keyboard
  • be usable with a keyboard
  • indicate when they have focus
  • change in appearance when touched (in the touch-down state)
  • change in appearance when hovered
  • be usable with touch
  • be usable with voice commands
  • have visible text
  • have meaningful text

Other examples

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

  • id - accepts a string for the element ID attribute
  • data_attributes - accepts a hash of data attributes
  • aria - accepts a hash of aria attributes
  • classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
  • margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale (defaults to no margin)
  • role - accepts a space separated string of roles
  • lang - accepts a language attribute value
  • open - accepts an open attribute value (true or false)
  • hidden - accepts an empty string, ‘hidden’, or ‘until-found’
  • tabindex - accepts an integer. The integer can also be passed as a string.
  • dir - accepts ‘rtl’, ‘ltr’, or ‘auto’.

With a different heading level (preview)

Use a different heading level for the main link title. Defaults to H2 if not passed.

<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",
  heading_text: "I am a heading level 3",
  heading_level: 3
} %>
</div>

Without a heading (preview)

The heading tag can be removed if the heading_level parameter is passed as 0.

<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",
  heading_text: "I am not a heading",
  heading_level: 0
} %>
</div>

With lazy loading (preview)

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

<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>

With more information (preview)

Government does things

Press release

Following a thorough review of existing procedure, a government body has today announced that further work is necessary.
some meaningful alt text please
<div class="govuk-!-width-one-third">
  <%= render "govuk_publishing_components/components/image_card", {
  href: "/also-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",
  context: {
    date: "2016-06-27 10:29:44 +0000",
    text: "Press release"
  },
  heading_text: "Government does things",
  description: "Following a thorough review of existing procedure, a government body has today announced that further work is necessary."
} %>
</div>

With extra details (preview) 

<div class="govuk-!-width-one-third">
  <%= render "govuk_publishing_components/components/image_card", {
  href: "/a-page-no-just-kidding",
  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: "Some more links",
  description: "Greater transparency across government is at the heart of our commitment to let you hold politicians and public bodies to account.",
  extra_details: [
    {
      text: "Single departmental plans",
      href: "/1"
    },
    {
      text: "Prime Minister's and Cabinet Office ministers' transparency publications relating to freedom of information requests for general consumption and the public interest in general",
      href: "/2"
    },
    {
      text: "Government transparency data",
      href: "/3"
    }
  ]
} %>
</div>

Extra details without indent (preview)

Don’t indent the extra links. Used for links to people pages.

<div class="govuk-!-width-one-third">
  <%= render "govuk_publishing_components/components/image_card", {
  href: "/government/people/",
  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",
  context: {
    text: "The Rt Hon"
  },
  heading_text: "John Whiskers MP",
  extra_details: [
    {
      text: "Minister for Cats",
      href: "/government/ministers/"
    }
  ],
  extra_details_no_indent: true
} %>
</div>

Without heading text (preview)

The only required parameter to the component is href but if no heading_text is supplied the link will not appear. This is to allow the component to use only extra links as shown.

In this situation the link could have been applied to the image but having a link on the image like this without text can be confusing.

Here are some links to more information about the thing you are reading about.
some meaningful alt text please
<div class="govuk-!-width-one-third">
  <%= render "govuk_publishing_components/components/image_card", {
  href: "/still-not-a-link",
  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",
  description: "Here are some links to more information about the thing you are reading about.",
  extra_details: [
    {
      text: "More information",
      href: "/1"
    },
    {
      text: "Even more information",
      href: "/2"
    },
    {
      text: "One final bit of information we forgot to mention",
      href: "/2"
    }
  ]
} %>
</div>

Without an image (preview)

Despite the name of the component, it is possible to have it display without an image.

John McJohnson

Deputy director for Parks and Small Trees
<div class="govuk-!-width-one-third">
  <%= render "govuk_publishing_components/components/image_card", {
  href: "/no-valid-links-here",
  heading_text: "John McJohnson",
  description: "Deputy director for Parks and Small Trees"
} %>
</div>

With number 10 branding (preview)

Organisation colour branding can be added to the component as shown.

Something relating to this

Public reform committee consultation vote department interior minister referendum.
some meaningful alt text please
<div class="govuk-!-width-one-third">
  <%= render "govuk_publishing_components/components/image_card", {
  brand: "prime-ministers-office-10-downing-street",
  href: "/again-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: "Something relating to this",
  description: "Public reform committee consultation vote department interior minister referendum.",
  extra_details: [
    {
      text: "Something",
      href: "/1"
    },
    {
      text: "Something else",
      href: "/2"
    }
  ]
} %>
</div>

Large version (preview)

Something has happened nearby possibly

Announcement

Following a news report that something has happened, further details are emerging of the thing that has happened and what that means for you.
some meaningful alt text please
<div class="govuk-!-width-full">
  <%= render "govuk_publishing_components/components/image_card", {
  large: true,
  href: "/still-not-a-page",
  image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/91397/s712_SG_Swear_in_1_.jpg",
  image_alt: "some meaningful alt text please",
  context: {
    date: "2017-06-14 11:30:00 +0000",
    text: "Announcement"
  },
  heading_text: "Something has happened nearby possibly",
  description: "Following a news report that something has happened, further details are emerging of the thing that has happened and what that means for you."
} %>
</div>

Two thirds (preview)

This variant is used for the featured section on the homepage. The aspect ratio used is 1:1 and the width of the image is constrained to 80px wide.

Setting large_font_size_mobile to true will ensure that the font size for the title and description will be 19px on all screen sizes.

Something has happened nearby possibly

Following a news report that something has happened, further details are emerging of the thing that has happened and what that means for you.
some meaningful alt text please
<div class="govuk-!-width-full">
  <%= render "govuk_publishing_components/components/image_card", {
  two_thirds: true,
  href: "/still-not-a-page",
  image_src: "https://www.gov.uk/assets/static/govuk-apple-touch-icon-180x180-026deaa34fa328ae5f1f519a37dbd15e6555c5086e1ba83986cd0827a7209902.png",
  image_alt: "some meaningful alt text please",
  heading_text: "Something has happened nearby possibly",
  description: "Following a news report that something has happened, further details are emerging of the thing that has happened and what that means for you.",
  large_font_size_mobile: true
} %>
</div>

Youtube video (preview)

Given a Youtube video id, the image card will render a Youtube embed instead of an image. If Javascript fails to execute for any reason, then a fallback link to the Youtube video will be rendered instead.

Youtube does not support embeds on Internet Explorer versions lower than 10. In addition, Youtube’s website will block any version of Internet Explorer using it. There is therefore no fallback for IE9 and lower.

Announcement

Following a news report that something has happened, further details are emerging of the thing that has happened and what that means for you.
<div class="govuk-!-width-full">
  <%= render "govuk_publishing_components/components/image_card", {
  youtube_video_id: "XnP6jaK7ZAY",
  href: "/still-not-a-page",
  youtube_video_alt: "The vision for GOV.UK",
  context: {
    date: "2017-06-14 11:30:00 +0000",
    text: "Announcement"
  },
  description: "Following a news report that something has happened, further details are emerging of the thing that has happened and what that means for you.",
  extra_details: [
    {
      text: "Link to video transcript",
      href: "/1"
    }
  ]
} %>
</div>

With ga4 tracking (preview)

The component does not include an option for GA4 tracking, but data attributes to enable the GA4 link tracker can be passed as shown.

<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",
  data_attributes: {
    module: "ga4-link-tracker",
    ga4_link: {
      event_name: "navigation",
      type: "homepage",
      index_section: 1,
      index_link: 1,
      index_section_count: 1,
      index_total: 1,
      section: "homepage"
    }
  }
} %>
</div>

With metadata (preview)

Can be used for links to people pages to indicate payment type

<div class="govuk-!-width-one-third">
  <%= render "govuk_publishing_components/components/image_card", {
  href: "/government/people/",
  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",
  context: {
    text: "The Rt Hon"
  },
  heading_text: "John Whiskers MP",
  metadata: "Unpaid",
  extra_details: [
    {
      text: "Minister for Cats",
      href: "/government/ministers/"
    }
  ],
  extra_details_no_indent: true
} %>
</div>

With sizes attribute (preview)

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

Read more about responsive images

<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>

With srcset (preview)

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.

<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>