AccordionQuote
A quote element embedded in an accordion is an enhanced block of text which puts in plain language the main idea of the accordion paragraph(s).
Variations
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
Eu sem integer vitae justo eget magna fermentum iaculis eu. Et tortor consequat id porta. Quis varius quam quisque id diam vel. Risus at ultrices mi tempus imperdiet. Tristique sollicitudin nibh sit amet commodo.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Eu sem integer vitae justo eget magna fermentum iaculis eu. Et tortor consequat id porta. Quis varius quam quisque id diam vel. Risus at ultrices mi tempus imperdiet. Tristique sollicitudin nibh sit amet commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Details
Usage
The quote component is used inside an accordion to enhanced a block of text either as a pull quote or as a highlight.
Guidelines
- Should be embedded in a accordion component
- 75 characters (variation 4 allows a maximum of 280 characters)
HTML structure
Overall HTML view of a quote element inside an accordion:
div.accordion
div.headerdiv.content-box
div.quotePresets
Accordion with quote presets:
| Preset | Description |
|---|---|
| Quote | Default template. |
| Highlight | Default template. |
Variations
Accordion with quote variations:
Modifiers
Quote classes:
| Class | Description |
|---|---|
-left, -right, -half-aside, -aside | ... |
-smaller | ... |
-stars-watermark | ... |
Please bear in mind the utility classes are placed in the root element of the component.