List
A list is an unordered/ordered list component used to structure the content.
Variations
?
Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
Component used in
Page template
Details
Usage
Lists are used to structure the content in bullets.
Guidelines
- Avoid to add too much content per bullet
- Character limits (including spaces):
- 75 characters for the title (
.title)
- 75 characters for the title (
HTML structure
Overall HTML view of a list component:
HTML file (.html)
(other component(s))
div.list
div.header (optional)
div.titleul || ol
li (one or more)
(element(s))
(other component(s))
Presets
List presets:
| Preset | Description |
|---|---|
| Unordered | Default preset for unordered lists. |
| Ordered | Default preset for ordered lists. |
| Nested unordered | Sample of a nested unordered list. |
| Nested ordered | Sample of a nested ordered list. |
| Basic | Preset with the minimum requirements of the component. |
Presets are ready to use HTML structures.
Variations
List variations:
| Variation | Description |
|---|---|
| Unordered | This snippet is composed of a header with an unordered list (ul) of three bullets. |
| Ordered | This snippet is composed of a header with an ordered list (ol) of three bullets. |
| Nested unordered | This snippet is composed of a header with an unordered list (ul) of three bullets. The first item has a nested list. |
| Nested ordered | This snippet is composed of a header with an ordered list (ol) of three bullets. The first item has a nested list |
| Basic | This snippet is composed of an unordered list (ul) of three bullets. |
Modifiers
List classes:
| Class | Description |
|---|---|
-top-arrow | Adds an arrow on top of the header. |
-two-columns | Changes the bullets layout to two columns. |
-link-icons | Changes the bullet icon to the one the first link has. |
-lower-alpha, -upper-alpha, -lower-roman, -upper-roman, -decimal-lower-alpha, -decimal-upper-alpha, -decimal-lower-roman, -decimal-upper-roman, -index | Works solely in ordered lists. Changes the list counter to the one selected. |
-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 list component can be embedded inside other component:
main (HTML file)
(component, one of the above list)
div.list (element)Some components can be placed/embedded inside other components. Whenever this happens, they become elements of the respective parent component and they can no longer be called components.
Nesting
The list component cannot be used as a container of other components and/or elements.
main (HTML file)
div.list
(Element)