name: Image card
description: Image and associated text with a link
body: |
  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](https://www.gov.uk/government/organisations/attorney-generals-office).
accessibility_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
shared_accessibility_criteria:
  - link
examples:
  default:
    data:
      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"
  with_a_different_heading_level:
    description: Use a different heading level for the main link title. Defaults to H2 if not passed.
    data:
      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:
    description: The heading tag can be removed if the heading_level parameter is passed as 0.
    data:
      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:
    data:
      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
        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:
    data:
      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:
    description: Don't indent the extra links. Used for links to people pages.
    data:
      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_links: [
        {
          text: "Minister for Cats",
          href: "/government/ministers/"
        }
      ]
      extra_links_no_indent: true
  extra_links_with_no_main_link:
    description: 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.
    data:
      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_links: [
        {
          text: "Minister for Cats",
          href: "/government/ministers/"
        },
        {
          text: "Head of Tuna Operations",
          href: "/government/ministers/"
        }
      ]
  without_heading_text:
    description: |
      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.
    data:
      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:
    description: Despite the name of the component, it is possible to have it display without an image.
    data:
      href: '/no-valid-links-here'
      heading_text: 'John McJohnson'
      description: 'Deputy director for Parks and Small Trees'
  with_branding:
    description: Organisation [colour branding](https://github.com/alphagov/govuk_publishing_components/blob/master/docs/component_branding.md) can be added to the component as shown.
    data:
      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:
    data:
      large: true
      href: "/still-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: 2017-06-14 11:30: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:
    data:
      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:
    description: Can be used for links to people pages to indicate payment type
    data:
      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_links: [
        {
          text: "Minister for Cats",
          href: "/government/ministers/"
        }
      ]
      extra_links_no_indent: true
  with_lang:
    description: |
      Pass through an appropriate `lang` to set a HTML lang attribute for the component.

      The `lang` attribute **must** be set to a [valid BCP47 string](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang#Language_tag_syntax). A valid code can be the two or three letter language code - for example, English is `en` or `eng`, Korean is `ko` or `kor` - but if in doubt please check.
    data:
      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: Yr hyn rydym ni'n ei wneud
      lang: cy