1. Collections Component Guide
  2. Taxon list
Component

Taxon list

A list of taxons

A taxon is defined as a single node in the new taxonomy structure or, more simply, a topic or category that content can be tagged to.

This component can be used to surface a list of links to related content within the taxonomy.

This component is used as part of the Education AB test. An example is Funding and Finances for Students

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

  1. Adult Dependants' Grant

    Adult Dependants' Grant for full-time students who financially support an adult - funding, how to apply, eligibility

  2. Care to Learn

    Care to Learn helps pay for childcare while you're studying - how to apply, money you get, courses that qualify, eligibility

  3. Childcare Grant

    Childcare Grants for full-time students in higher education - grants, CCG1, CCG2 forms, how to apply, eligibility

How to call this component

<%= render "components/taxon_list", {
  items: [
    {
      text: "Adult Dependants' Grant",
      path: "/adult-dependants-grant",
      description: "Adult Dependants' Grant for full-time students who financially support an adult - funding, how to apply, eligibility"
    },
    {
      text: "Care to Learn",
      path: "/care-to-learn",
      description: "Care to Learn helps pay for childcare while you're studying - how to apply, money you get, courses that qualify, eligibility"
    },
    {
      text: "Childcare Grant",
      path: "/childcare-grant",
      description: "Childcare Grants for full-time students in higher education - grants, CCG1, CCG2 forms, how to apply, eligibility"
    }
  ]
} %>

Accessibility acceptance criteria

Taxon list items must:

  • not use headings when there is no description
  • use the correct heading level for the page when a description is provided

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
  • have meaningful text

Other examples

With custom heading level (preview)

Sometimes the component will be included beneath an h1, at other times beneath an h2. Allow the heading level to be customised.

  1. Adult Dependants' Grant

    Adult Dependants' Grant for full-time students who financially support an adult - funding, how to apply, eligibility

  2. Care to Learn

    Care to Learn helps pay for childcare while you're studying - how to apply, money you get, courses that qualify, eligibility

  3. Childcare Grant

    Childcare Grants for full-time students in higher education - grants, CCG1, CCG2 forms, how to apply, eligibility 

<%= render "components/taxon_list", {
  heading_level: 3,
  items: [
    {
      text: "Adult Dependants' Grant",
      path: "/adult-dependants-grant",
      description: "Adult Dependants' Grant for full-time students who financially support an adult - funding, how to apply, eligibility"
    },
    {
      text: "Care to Learn",
      path: "/care-to-learn",
      description: "Care to Learn helps pay for childcare while you're studying - how to apply, money you get, courses that qualify, eligibility"
    },
    {
      text: "Childcare Grant",
      path: "/childcare-grant",
      description: "Childcare Grants for full-time students in higher education - grants, CCG1, CCG2 forms, how to apply, eligibility"
    }
  ]
} %>

With no headings (preview)

Sometimes it may not be appropriate to render the link titles as headings, as these will clutter up the page.

  1. Adult Dependants' Grant

    Adult Dependants' Grant for full-time students who financially support an adult - funding, how to apply, eligibility

  2. Care to Learn

    Care to Learn helps pay for childcare while you're studying - how to apply, money you get, courses that qualify, eligibility 

<%= render "components/taxon_list", {
  heading_level: 0,
  items: [
    {
      text: "Adult Dependants' Grant",
      path: "/adult-dependants-grant",
      description: "Adult Dependants' Grant for full-time students who financially support an adult - funding, how to apply, eligibility"
    },
    {
      text: "Care to Learn",
      path: "/care-to-learn",
      description: "Care to Learn helps pay for childcare while you're studying - how to apply, money you get, courses that qualify, eligibility"
    }
  ]
} %>

Without descriptions (preview)

Descriptions can be omitted although this isn’t currently used. When omitted the link is not wrapped in a heading.

<%= render "components/taxon_list", {
  items: [
    {
      text: "Adult Dependants' Grant",
      path: "/adult-dependants-grant"
    },
    {
      text: "Care to Learn",
      path: "/care-to-learn"
    },
    {
      text: "Childcare Grant",
      path: "/childcare-grant"
    }
  ]
} %>

With data attributes (preview)

Arbitrary data attributes can be included with each link, usually for analytics tracking.

  1. Adult Dependants' Grant

    Adult Dependants' Grant for full-time students who financially support an adult - funding, how to apply, eligibility

  2. Care to Learn

    Care to Learn helps pay for childcare while you're studying - how to apply, money you get, courses that qualify, eligibility 

<%= render "components/taxon_list", {
  items: [
    {
      text: "Adult Dependants' Grant",
      path: "/adult-dependants-grant",
      description: "Adult Dependants' Grant for full-time students who financially support an adult - funding, how to apply, eligibility",
      data_attributes: {
        track_category: "navSubtopicContentItemLinkClicked",
        track_action: 1.1,
        track_label: "/green-taxes-and-reliefs",
        track_options: {
          dimension28: 2,
          dimension29: "Environmental taxes, reliefs and schemes for businesses"
        }
      }
    },
    {
      text: "Care to Learn",
      path: "/care-to-learn",
      description: "Care to Learn helps pay for childcare while you're studying - how to apply, money you get, courses that qualify, eligibility",
      data_attributes: {
        track_category: "navSubtopicContentItemLinkClicked",
        track_action: 1.2,
        track_label: "/guidance/aggregates-levy-register-or-change-your-details",
        track_options: {
          dimension28: 2,
          dimension29: "Aggregates Levy: register or change your details"
        }
      }
    }
  ]
} %>