1. Collections Component Guide
  2. Highlight boxes
  3. Half width
Highlight boxes example

Half width

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.

How it looks (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

How to call this example

<%= 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"
      }
    }
  ]
} %>