See also boxes
The see also boxes component is used to add related content to the page guiding the user to additional information. It should appear at the bottom of the page.
Variations
Find out more about related content
LOREM IPSUM DOLOR SIT AMET
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volup.
Consectetur adipiscing elitFind out more about related content
LOREM IPSUM DOLOR SIT AMET
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volup.
Consectetur adipiscing elitLOREM IPSUM DOLOR SIT AMET
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volup.
Consectetur adipiscing elitFind out more about related content
LOREM IPSUM DOLOR SIT AMET
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volup.
Consectetur adipiscing elitLOREM IPSUM DOLOR SIT AMET
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volup.
Consectetur adipiscing elitLOREM IPSUM DOLOR SIT AMET
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volup.
Consectetur adipiscing elitFind out more about related content
LOREM IPSUM DOLOR SIT AMET
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volup.
Consectetur adipiscing elitLOREM IPSUM DOLOR SIT AMET
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volup.
Consectetur adipiscing elitFind out more about related content
LOREM IPSUM DOLOR SIT AMET
Consectetur adipiscing elitLOREM IPSUM DOLOR SIT AMET
Consectetur adipiscing elitComponent used in
Details
Usage
The see also boxes component is used to add related content to the page guiding the user to additional information.
Guidelines
- Optional for all web pages
- Do not add more than one link per item, and not more than 2 items per See also box.
- Maximum number of characters:
- 75 characters for the title (
h3tag) - 280 characters for the blurb (
ptag) - 45 characters for the link (
atag)
- 75 characters for the title (
- Image dimensions:
- 1000x750 (resolution)
- JPG and WEBP (format)
HTML structure
Overall HTML view of a see also boxes component:
div.see-also-boxes
div.headlineh2div.container
div.content-box (one or more up to three)
div[data-image] (optional)h3p (optional)aPresets
See also boxes presets:
| Preset | Description |
|---|---|
| Default | Default preset. |
| Without images | Whenever images are missing. |
| Basic | Whenever images and blurbs are missing. |
Presets are ready to use HTML structures.
Variations
See also boxes variations:
| Variation | Description |
|---|---|
| One box, Two boxes, Three boxes | Dependind on the available content the number of boxes changes. |
| Without image(s) | Whenever images are missing. |
| Without image(s) and blurb(s) | Whenever images and blurbs are missing. |
Modifiers
See also boxes classes:
| Class | Description |
|---|---|
-two-columns, -three-columns | Structures the code in different columns. Three columns should be treated as an exception. |
-align-center | Justifies center the .content-box content (title, blurb and link). |
-no-space-below | Removes component margin bottom. |
To enable a modifier, add it as a class to the outermost element of this component.
Embedding
The see also boxes component cannot be embedded inside other component.
main (HTML file)
div.see-also-boxesNesting
The see also boxes component cannot be used as a container of other components and/or elements.
main (HTML file)
div.see-also-boxes