AccordionDefinition list
A definition list element embedded in an accordion item is a list of related information pairs.
When embedded, the definition list loses the div.header block. Moreover, the dl element does not require to be wrapped by a div.definition-list container.
Variations
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.
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.
Details
Usage
The definition list element is used inside an accordion whenever its content is not required to be featured on the page at the first glance.
Guidelines
- Should be inserted in the
content-boxcontainer of the accordion - When embedded, the definition list loses the
div.definition-listcontainer and thediv.headerblock
HTML structure
Overall HTML view of a definition list element inside an accordion:
div.accordion
div.headerdiv.content-box
dl
dt (one or more)
dd (one or more)
Presets
Accordion with definition list presets:
| Preset | Description |
|---|---|
| Default | Default preset. |
Variations
Accordion with definition list variations:
| Variation | Description |
|---|---|
| Default | Composed of a three items accordion and a definition list tag inside the first item. |