Image card example

Without heading text

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.

How it looks (preview)

Here are some links to more information about the thing you are reading about.

• More information
• Even more information
• One final bit of information we forgot to mention

How to call this example

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