1. Government Frontend Component Guide
  2. Image card

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.

Search for usage of this component on GitHub

How it looks (preview all)

How to call this component

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

Accessibility acceptance criteria

The component must:

  • include alt text for images when present
  • not have duplicate links for the image and the text

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

Other examples

With a different heading level (preview)

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

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

Without a heading (preview)

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

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

With more information (preview)

some meaningful alt text please

Press release

Government does things

Following a thorough review of existing procedure, a government body has today announced that further work is necessary.
<%= 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-27T10:29:44.000+00:00",
    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."
} %>

With extra links (preview)

<%= 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_links: [
    {
      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"
    }
  ]
} %>

Extra links without indent (preview)

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

<%= render "govuk_publishing_components/components/image_card", {
  href: "/government/people/",
  image_src: "http://placekitten.com/215/140",
  image_alt: "some meaningful alt text please",
  context: {
    text: "The Rt Hon"
  },
  heading_text: "John Whiskers MP",
  extra_links: [
    {
      text: "Minister for Cats",
      href: "/government/ministers/"
    }
  ],
  extra_links_no_indent: true
} %>

Extra links with no main link (preview)

If extra links are included, the main link is not needed. Note that in this configuration the image is not a link as no link has been supplied.

<%= render "govuk_publishing_components/components/image_card", {
  image_src: "http://placekitten.com/215/140",
  image_alt: "some meaningful alt text please",
  heading_text: "John Whiskers MP",
  extra_links: [
    {
      text: "Minister for Cats",
      href: "/government/ministers/"
    },
    {
      text: "Head of Tuna Operations",
      href: "/government/ministers/"
    }
  ]
} %>

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.

some meaningful alt text please
Here are some links to more information about the thing you are reading about.
<%= 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_links: [
    {
      text: "More information",
      href: "/1"
    },
    {
      text: "Even more information",
      href: "/2"
    },
    {
      text: "One final bit of information we forgot to mention",
      href: "/2"
    }
  ]
} %>

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
<%= render "govuk_publishing_components/components/image_card", {
  href: "/no-valid-links-here",
  heading_text: "John McJohnson",
  description: "Deputy director for Parks and Small Trees"
} %>

With branding (preview)

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

some meaningful alt text please

Something relating to this

Public reform committee consultation vote department interior minister referendum.
<%= render "govuk_publishing_components/components/image_card", {
  brand: "department-for-work-pensions",
  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_links: [
    {
      text: "Something",
      href: "/1"
    },
    {
      text: "Something else",
      href: "/2"
    }
  ]
} %>

Large version (preview)

some meaningful alt text please

Announcement

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.
<%= render "govuk_publishing_components/components/image_card", {
  large: true,
  href: "/still-not-a-page",
  image_src: "https://assets.publishing.service.gov.uk/frontend/homepage/uk-leaves-the-eu-d84d2981a9953d8b1261c9d25016223b0a8af3c096fa2d5e03510d73a78e3c60.jpg",
  image_alt: "some meaningful alt text please",
  context: {
    date: "2017-06-14T11:30:00.000+00:00",
    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."
} %>

With tracking (preview)

<%= render "govuk_publishing_components/components/image_card", {
  href: "/i-am-not-a-valid-link",
  href_data_attributes: {
    track_category: "href_category",
    track_action: 1.1,
    track_label: "href_label",
    track_options: {
      dimension28: 1,
      dimension29: "dimension29Href"
    }
  },
  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: "A link with tracking",
  extra_links: [
    {
      text: "Another link with tracking",
      href: "/1",
      data_attributes: {
        track_category: "extra_category",
        track_action: 2.1,
        track_label: "extra_label",
        track_options: {
          dimension28: 1,
          dimension29: "dimension29Extra"
        }
      }
    }
  ]
} %>

With metadata (preview)

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

<%= render "govuk_publishing_components/components/image_card", {
  href: "/government/people/",
  image_src: "http://placekitten.com/215/140",
  image_alt: "some meaningful alt text please",
  context: {
    text: "The Rt Hon"
  },
  heading_text: "John Whiskers MP",
  metadata: "Unpaid",
  extra_links: [
    {
      text: "Minister for Cats",
      href: "/government/ministers/"
    }
  ],
  extra_links_no_indent: true
} %>