Teasers
The teasers are meant to be easily scannable and do not give more detail than is necessary for a user to quickly determine actionable information.
Variations
?
Component used in
Details
Usage
The teasers are meant to be easily scannable and do not give more detail than is necessary for a user to quickly determine actionable information.
Guidelines
- Character limits for the upper part (including spaces):
- 75 characters for the title (
h2) - 280 characters for the paragraph (
p)
- 75 characters for the title (
- Character limits for each teaser box (including spaces):
- 75 characters for the title (
.title) - 280 characters for the paragraph (
p) - 45 characters for the link (
a)
- 75 characters for the title (
HTML structure
Overall HTML view of a teasers component:
HTML file (.html)
(other component(s))
div.teasers
div.upper
div.display-1/div.display-2 (optional)h2 (optional)p (optional)div.lower
div.container
div.box
div.header
div.titlediv.content-box
h3 (optional)p (one or more)a (optional)(other component(s))
Presets
Teasers presets:
| Preset | Description |
|---|---|
| Default | Default preset. |
| With display | Mainly to be used to highlight key achievements. |
| Status messages | To be used when showing the working status of systems. |
Presets are ready to use HTML structures.
Variations
Teasers variations:
Modifiers
Teasers 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 teasers component cannot be embedded inside other component.
main (HTML file)
(component)
div.teasersNesting
The teasers component cannot be used as a container of other components and/or elements.
main (HTML file)
div.teasers
(Element)