1. Component Guide
  2. Taxonomy list
  3. With image cards
Taxonomy list example

With image cards

How it looks (preview)

How to call this example

<%= render "govuk_publishing_components/components/taxonomy_list", {
  image_cards: {
    items: [
      {
        link: {
          path: "/not-a-page",
          text: "News headline",
          heading_level: 0
        },
        image: {
          url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG",
          alt: "some meaningful alt text please",
          context: {
            text: "The Rt Hon"
          }
        }
      },
      {
        link: {
          path: "/not-a-page",
          text: "News headline",
          heading_level: 0
        },
        image: {
          url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG",
          alt: "some meaningful alt text please",
          context: {
            text: "The Rt Hon"
          }
        }
      },
      {
        link: {
          path: "/not-a-page",
          text: "News headline",
          heading_level: 0
        },
        image: {
          url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG",
          alt: "some meaningful alt text please",
          context: {
            text: "The Rt Hon"
          }
        }
      },
      {
        link: {
          path: "/not-a-page",
          text: "News headline",
          heading_level: 0
        },
        image: {
          url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG",
          alt: "some meaningful alt text please",
          context: {
            text: "This is a document",
            date: "2016-06-27 10:29:44 +0000"
          }
        }
      }
    ]
  },
  document_list: {
    items: [
      {
        link: {
          text: "If your child is taken into care",
          path: "/child-into-care",
          description: "What happens if your child is taken into care"
        },
        metadata: {
          document_type: "Detailed guide"
        }
      },
      {
        link: {
          text: "High needs funding",
          path: "/high-needs-funding"
        },
        metadata: {
          document_type: "Guide"
        }
      }
    ],
    within_multitype_list: true
  }
} %>