Component

Highlight boxes

Displays content item details in a grid of highlight boxes, with a max of 3 items per row.

The highlight boxes have several optional flags which can be set:

• Inverse - renders the highlight boxes as white text on a blue background
• Featured - renders a specific highlight box with larger font size

Search for usage of this component on GitHub

How it looks (preview) (preview all)

1. If your child is taken into care

   Detailed guide

2. High needs funding

   Guide

3. Joint Statement of the 4th meeting of the UK-China High-Level People to People Dialogue

   Policy paper

How to call this component

<%= render "govuk_publishing_components/components/highlight_boxes", {
  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"
      }
    },
    {
      link: {
        text: "Joint Statement of the 4th meeting of the UK-China High-Level People to People Dialogue",
        path: "/government/publications/joint-statement-of-the-4th-meeting-of-the-uk-china-high-level-people-to-people-dialogue"
      },
      metadata: {
        document_type: "Policy paper"
      }
    }
  ]
} %>

Accessibility acceptance criteria

The highlight boxes must:

• be visually distinct from other content on the page
• have a text contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA

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 descriptions and metadata (preview)

1. Becoming an apprentice

   Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship

   Speech

   DfE and Ofqual

   27 June 2016
2. Becoming an apprentice

   Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship

   Speech

   DfE and Ofqual

   27 June 2016
3. Becoming an apprentice

   Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship

   Speech

   DfE and Ofqual

   27 June 2016

<%= render "govuk_publishing_components/components/highlight_boxes", {
  items: [
    {
      link: {
        text: "Becoming an apprentice",
        path: "/becoming-an-apprentice",
        description: "Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship"
      },
      metadata: {
        document_type: "Speech",
        organisation: "DfE and Ofqual",
        public_updated_at: "2016-06-27 10:29:44 +0000"
      }
    },
    {
      link: {
        text: "Becoming an apprentice",
        path: "/becoming-an-apprentice",
        description: "Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship"
      },
      metadata: {
        document_type: "Speech",
        organisation: "DfE and Ofqual",
        public_updated_at: "2016-06-27 10:29:44 +0000"
      }
    },
    {
      link: {
        text: "Becoming an apprentice",
        path: "/becoming-an-apprentice",
        description: "Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship"
      },
      metadata: {
        document_type: "Speech",
        organisation: "DfE and Ofqual",
        public_updated_at: "2016-06-27 10:29:44 +0000"
      }
    }
  ]
} %>

Inverse (preview)

1. Becoming an apprentice

   Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship

   Speech

   DfE and Ofqual

   27 June 2016
2. Becoming an apprentice

   Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship

   Speech

   DfE and Ofqual

   27 June 2016
3. Becoming an apprentice

   Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship

   Speech

   DfE and Ofqual

   27 June 2016

<%= render "govuk_publishing_components/components/highlight_boxes", {
  inverse: true,
  items: [
    {
      link: {
        text: "Becoming an apprentice",
        path: "/becoming-an-apprentice",
        description: "Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship"
      },
      metadata: {
        document_type: "Speech",
        organisation: "DfE and Ofqual",
        public_updated_at: "2016-06-27 10:29:44 +0000"
      }
    },
    {
      link: {
        text: "Becoming an apprentice",
        path: "/becoming-an-apprentice",
        description: "Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship"
      },
      metadata: {
        document_type: "Speech",
        organisation: "DfE and Ofqual",
        public_updated_at: "2016-06-27 10:29:44 +0000"
      }
    },
    {
      link: {
        text: "Becoming an apprentice",
        path: "/becoming-an-apprentice",
        description: "Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship"
      },
      metadata: {
        document_type: "Speech",
        organisation: "DfE and Ofqual",
        public_updated_at: "2016-06-27 10:29:44 +0000"
      }
    }
  ]
} %>

Featured card (preview)

Used to highlight a specific content item within the highlight boxes, e.g: the most popular.

1. Becoming an apprentice

   Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship

   Speech

   DfE and Ofqual

   27 June 2016
2. Becoming an apprentice

   Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship

   Speech

   DfE and Ofqual

   27 June 2016

<%= render "govuk_publishing_components/components/highlight_boxes", {
  items: [
    {
      link: {
        text: "Becoming an apprentice",
        path: "/becoming-an-apprentice",
        description: "Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship",
        featured: true
      },
      metadata: {
        document_type: "Speech",
        organisation: "DfE and Ofqual",
        public_updated_at: "2016-06-27 10:29:44 +0000"
      }
    },
    {
      link: {
        text: "Becoming an apprentice",
        path: "/becoming-an-apprentice",
        description: "Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship"
      },
      metadata: {
        document_type: "Speech",
        organisation: "DfE and Ofqual",
        public_updated_at: "2016-06-27 10:29:44 +0000"
      }
    }
  ]
} %>

Half width (preview)

The default component displays 3 highlight boxes in on row on desktop; 2 on tablet; and full-width on mobile. There are cases where we might want to show just two items per row even on desktop, for example two-third layouts.

1. Becoming an apprentice

   Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship

   Speech

   DfE and Ofqual

   27 June 2016
2. Becoming an apprentice

   Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship

   Speech

   DfE and Ofqual

   27 June 2016
3. Becoming an apprentice

   Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship

   Speech

   DfE and Ofqual

   27 June 2016

<%= render "govuk_publishing_components/components/highlight_boxes", {
  half_width: true,
  items: [
    {
      link: {
        text: "Becoming an apprentice",
        path: "/becoming-an-apprentice",
        description: "Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship"
      },
      metadata: {
        document_type: "Speech",
        organisation: "DfE and Ofqual",
        public_updated_at: "2016-06-27 10:29:44 +0000"
      }
    },
    {
      link: {
        text: "Becoming an apprentice",
        path: "/becoming-an-apprentice",
        description: "Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship"
      },
      metadata: {
        document_type: "Speech",
        organisation: "DfE and Ofqual",
        public_updated_at: "2016-06-27 10:29:44 +0000"
      }
    },
    {
      link: {
        text: "Becoming an apprentice",
        path: "/becoming-an-apprentice",
        description: "Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship"
      },
      metadata: {
        document_type: "Speech",
        organisation: "DfE and Ofqual",
        public_updated_at: "2016-06-27 10:29:44 +0000"
      }
    }
  ]
} %>

With data tracking attributes (preview)

1. Becoming an apprentice

   Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship

   Speech

   DfE and Ofqual

   27 June 2016
2. Becoming an apprentice

   Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship

   Speech

   DfE and Ofqual

   27 June 2016

<%= render "govuk_publishing_components/components/highlight_boxes", {
  items: [
    {
      link: {
        text: "Becoming an apprentice",
        path: "/becoming-an-apprentice",
        description: "Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship",
        data_attributes: {
          track_category: "servicesHighlightBoxClicked",
          track_action: 1,
          track_label: "/becoming-an-apprentice"
        }
      },
      metadata: {
        document_type: "Speech",
        organisation: "DfE and Ofqual",
        public_updated_at: "2016-06-27 10:29:44 +0000"
      }
    },
    {
      link: {
        text: "Becoming an apprentice",
        path: "/becoming-an-apprentice",
        description: "Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship",
        data_attributes: {
          track_category: "servicesHighlightBoxClicked",
          track_action: 2,
          track_label: "/becoming-an-apprentice",
          track_options: {
            dimension28: 2,
            dimension29: "Becoming an apprentice"
          }
        }
      },
      metadata: {
        document_type: "Speech",
        organisation: "DfE and Ofqual",
        public_updated_at: "2016-06-27 10:29:44 +0000"
      }
    }
  ]
} %>