Summary bullets
The summary bullets component is an highlighted container used to feature the page summary.
Variations
?
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
Component used in
Page template
Details
Usage
The summary bullets component is meant to be used in very long pages, offering an overview to the user.
Guidelines
- To be inserted on top of the HTML file, right after the title component
- Cannot be combined with the intro component
HTML structure
Overall HTML view of a summary bullets component:
HTML file (.html)
(other component(s))
div.summary-bullets
ul
li (one or more)(other component(s))
Presets
Summary bullets presets:
| Preset | Description |
|---|---|
| Default | Default preset. |
Presets are ready to use HTML structures.
Variations
Summary bullets variations:
| Variation | Description |
|---|---|
| One bullet, Two bullets, Three bullets | Depending on the content available the number of bullets differ. These snippets are just examples. |
Modifiers
Summary bullets classes:
| Class | Description |
|---|---|
-top-arrow, -bottom-arrow | Default class is -top-arrow. |
-no-space-below | Removes margin bottom from the component container. |
To enable a modifier, add it as a class to the outermost element of this component.
Embedding
The summary bullets component cannot be embedded inside other component.
main (HTML file)
(component)
div.summary-bulletsNesting
The summary bullets component cannot be used as a container of other components and/or elements.
main (HTML file)
div.summary-bullets
(Element)