1. Government Frontend Component Guide
  2. Taxonomy list

Component

Taxonomy list

Wraps the highlight box, document list and image card components in one list. This is commonly used on topic pages for links to tagged content.

The highlight box, document list and image card components are standalone components.

However, there are some use cases where we want to use these components together to render one list of links. This is not possible when using the components separately. This component wraps these components in one list, and applies relevant styling to get them to display appropriately together.

Note: At the moment, this component only works when displaying either highlight box + document list or image cards + document list. The layout for combining all three together hasn’t been fixed.

Search for usage of this component on GitHub

How it looks (preview all)

How to call this component

<%= render "govuk_publishing_components/components/taxonomy_list", {
  highlight_box: {
    inverse: true,
    items: [
      {
        link: {
          text: "If your child is taken into care",
          path: "/child-into-care",
          description: "Information on what to do 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",
          public_updated_at: "2016-06-27T10:29:44.000+00:00"
        }
      },
      {
        link: {
          text: "Student Finance",
          path: "/student-finance",
          description: "Student loan information"
        },
        metadata: {
          document_type: "Detailed guide"
        }
      },
      {
        link: {
          text: "If your child is taken into care",
          path: "/child-into-care",
          description: "Information on what to do if your child is taken into care"
        },
        metadata: {
          document_type: "Detailed guide"
        }
      }
    ],
    within_multitype_list: true
  },
  document_list: {
    items: [
      {
        link: {
          text: "If your child is taken into care",
          path: "/child-into-care"
        },
        metadata: {
          document_type: "Detailed guide"
        }
      },
      {
        link: {
          text: "High needs funding",
          path: "/high-needs-funding"
        },
        metadata: {
          document_type: "Guide"
        }
      }
    ],
    within_multitype_list: true
  }
} %>

Accessibility acceptance criteria

The taxonomy list should:

  • Wrap all links in one list
  • Should not be used to display links that don’t belong together in one list

Links in the component must:

  • accept focus
  • be focusable with a keyboard
  • be usable with a keyboard
  • indicate when they have focus
  • change in appearance when touched (in the touch-down state)
  • change in appearance when hovered
  • be usable with touch
  • be usable with voice commands
  • have visible text

Other examples

With image cards (preview)

<%= 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-27T10:29:44.000+00:00"
          }
        }
      }
    ]
  },
  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
  }
} %>