Definition list
Definition lists are pairs of related information displayed in a list.
Variations
- Lorem ipsum
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Lorem ipsum
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Lorem ipsum
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Lorem ipsum
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Lorem ipsum
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Lorem ipsum
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Lorem ipsum
-
- Lorem ipsum
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Lorem ipsum
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Lorem ipsum
-
- Lorem ipsum
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Lorem ipsum
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Component used in
Page template
Details
Usage
The definition list component is used to display pairs of connected information in a list. For example, a list of press officers and their contact details. With the names in the term field (dt), and their email and phone number in the description (dd).
Guidelines
- Each item should always feature two tags (
dtanddd), even if there's no data for one of them - There are no character limits, but the term (
dt) should be as short as possible. The definition (dd) can be a longer. - Make sure to always try to add a heading.
- Character limits (including spaces):
- 75 characters for the title (
.title)
- 75 characters for the title (
HTML structure
Overall HTML view of a definition list component:
div.definition-list
div.header (optional)
div.titledl
dt (one or more)
dd (one or more)
Nesting element might significantly affect the HTML markup.
Presets
Definition list presets:
| Preset | Description |
|---|---|
| Default | Default preset. |
| Without header | To be used whenever a list was provided without a title. |
| Basic | A definition list can be nested inside other definition list. This cannot o further than 2 levels. |
Presets are ready to use HTML structures.
Variations
Definition list variations:
| Variation | Description |
|---|---|
| Default | Composed of a title and a description list with three items. |
| Without header | Composed of a description list with three items. |
| Basic | Composed of a title and a description list with two items, each of them with two other definition list element. |
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
Definition list classes:
| Class | Description |
|---|---|
-top-arrow | Adds a top arrow on the top of the title. |
-zebra | Affects each even row addind a greyish background. |
-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 definition list component can be embedded inside other component:
main (HTML file)
div.definition-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 definition list component can be used as a container of other components and/or elements (a nested component becomes an element of the parent component):
| Element | Description |
|---|---|
| Accordion | Accordions can only be added inside definition list in the publication lists. |
main (HTML file)
div.definition-list (component)
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.