Image card example

Extra details with no links

If extra_details are passed to the component without href attributes, they are displayed as a simple text list.

How it looks (preview)

John Whiskers MP

  • Conservative 2010 to 2016
  • Labour 2007 to 2010
some meaningful alt text please

How to call this example

<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",
  heading_text: "John Whiskers MP",
  extra_details: [
    {
      text: "Conservative 2010 to 2016"
    },
    {
      text: "Labour 2007 to 2010"
    }
  ],
  extra_details_no_indent: true
} %>
</div>