1. Component Guide
  2. Image card
  3. With different link size
Image card example

With different link size

Set a different font size for the link. Uses the GOV.UK Frontend heading sizes but defaults to 19px for legacy reasons. Valid options are xl, l, m and s.

This option is not tied to the heading_level option in order to give flexibility.

How it looks (preview)

How to call this example

<div class="govuk-!-width-one-third">
  <%= render "govuk_publishing_components/components/image_card", {
  href: "/definitely-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 big link",
  heading_level: 0,
  font_size: "xl"
} %>
</div>