1. Government Frontend Component Guide
  2. Highlight boxes

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 all)

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

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

  2. Becoming an apprentice

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

  3. Becoming an apprentice

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

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

Inverse (preview)

  1. Becoming an apprentice

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

  2. Becoming an apprentice

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

  3. Becoming an apprentice

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

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

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

  2. Becoming an apprentice

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

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

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

  2. Becoming an apprentice

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

  3. Becoming an apprentice

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

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

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

  2. Becoming an apprentice

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

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