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
How it looks (preview) (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
- have meaningful text
Other examples
With descriptions and metadata (preview)
-
Becoming an apprentice
Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship
-
Becoming an apprentice
Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship
-
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-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)
-
Becoming an apprentice
Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship
-
Becoming an apprentice
Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship
-
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-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.
-
Becoming an apprentice
Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship
-
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-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.
-
Becoming an apprentice
Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship
-
Becoming an apprentice
Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship
-
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-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)
-
Becoming an apprentice
Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship
-
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-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"
}
}
]
} %>