Boxes
Use this component to link to other pages and documents, or use it to structure your story into bite sized pieces. A set of boxes can contain one to four boxes, each box should not contain more than one tweet worth of text.
Variations
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis eu. Et tortor consequat id porta. Quis varius quam quisque id diam vel.
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis eu. Et tortor consequat id porta. Quis varius quam quisque id diam vel.
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis eu. Et tortor consequat id porta. Quis varius quam quisque id diam vel.
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis eu. Et tortor consequat id porta. Quis varius quam quisque id diam vel.
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis eu. Et tortor consequat id porta. Quis varius quam quisque id diam vel.
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis eu. Et tortor consequat id porta. Quis varius quam quisque id diam vel.
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis eu. Et tortor consequat id porta. Quis varius quam quisque id diam vel.
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis eu. Et tortor consequat id porta. Quis varius quam quisque id diam vel.
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis eu. Et tortor consequat id porta. Quis varius quam quisque id diam vel.
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis eu. Et tortor consequat id porta. Quis varius quam quisque id diam vel.
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis eu. Et tortor consequat id porta. Quis varius quam quisque id diam vel.
Lorem ipsum dolor
Lorem ipsum dolor sit amet
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis eu. Et tortor consequat id porta. Quis varius quam quisque id diam vel.”
Component used in
Details
Usage
The boxes component is used to emphasize key points, summarise information, reduce the narrative text with the inclusion of visual elements and/or to add links. In other words, the boxes component is focused on a clean content categorisation while being enriched by visuals.
Guidelines
- Boxes must be preceded by a full width, dark blue component. For example, a combo box, a large box, a splitter, or a Jumbo box.
- Per set of boxes you should not put more than four boxes. If you have more than four, create two or more separate boxes sets and put a splitter in between. Make sure you split the boxes into meaningful groups
- You can mix and match boxes with a link and without if needed.
- Each box should contain:
- an image (
div[data-image]) - a title (
h3) - a paragraph (
p) - Optionally a link (
a)
- an image (
- Character limits (including spaces):
- 75 characters for the title (
h3) - 280 characters for the paragraph (
p) - 45 characters for the link (
a)
- 75 characters for the title (
- Image dimensions:
- 1000x750 (resolution)
- JPG and WEBP (format)
HTML structure
Overall HTML view of a boxes component:
main (HTML file)
div.boxes
div.box (one or more)
div[data-image]div.content-box
h3pa (optional)Nesting element might significantly affect the HTML markup.
Presets
Boxes presets:
| Preset | Description |
|---|---|
| With link | A group of one to four boxes, pointing to internal or external pages or documents. Each box has an image, a title, a paragraph and a link. |
| Just text | A group of one to four boxes, used to structure a story into small pieces. Each box has an image, a title and a paragraph. |
Presets are ready to use HTML structures.
Variations
Boxes variations:
| Variation | Description |
|---|---|
| One box, Two boxes, Three boxes, Four boxes | Depending on the content available the number of boxes is selected. |
| Basic | One single box without link. Used to summarise the narrative and to include a visual element. |
| Young economist competition | A box styling option used for showcasing each nominee of the competition. Each box has a video, a title, a subtitle, 2 document links and a paragraph. |
Most component variations are just samples of what can be achieved. Some components are flexible and expandable and this variations might not reflect all possible options.
Modifiers
Boxes classes:
| Class | Description |
|---|---|
-light-grey, -grey | Adds a background color to the written content container. To be used with moderation and under guidance of the Design team. |
To enable a modifier, add it as a class to the outermost element of this component.
Embedding
The boxes component cannot be embedded inside other component.
main (HTML file)
div.boxesNesting
The boxes component can be used as a container of other components and/or elements:
main (HTML file)
div.boxes
Elements are component add-ons which can be placed directly inside the component allowing you to adapt the HTML structure to your needs. The correct markup can be checked in the element page.