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.

Advanced settings

Presets

Preset	Description
Default	Default preset.

Default

Variations

Default

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: 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.

HTML

Copy to clipboard

<div class="accordion">
    <div class="header -opened">
        <div class="title">Lorem ipsum dolor sit amet</div>
    </div>
    <div class="content-box">
        <dl>
            <dt>Lorem ipsum dolor sit amet, consectetur</dt>
            <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
            <dt>Lorem ipsum dolor sit amet, consectetur</dt>
            <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
            <dt>Lorem ipsum dolor sit amet, consectetur</dt>
            <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
        </dl>
    </div>
    <div class="header">
        <div class="title">Lorem ipsum dolor sit amet</div>
    </div>
    <div class="content-box">
        <p>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.</p>
    </div>
    <div class="header">
        <div class="title">Lorem ipsum dolor sit amet</div>
    </div>
    <div class="content-box">
        <p>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.</p>
    </div>
</div>

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-box container of the accordion
When embedded, the definition list loses the div.definition-list container and the div.header block

HTML structure

Overall HTML view of a definition list element inside an accordion:

HTML file (.html)

(other component(s))

div.accordion

div.header

div.content-box

dl

dt (one or more)

(element(s))

dd (one or more)

(element(s))

(other component(s))

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.

AccordionDefinition list

Minimum requirements

Quick access

Presets

Variations

Details

Usage

Guidelines

HTML structure

Presets

Variations

Our website uses cookies

Thank you!

Thank you!

We have updated our privacy policy

Your cookie preference has expired