SectionQuote
A quote element embedded in a section is an enhanced block of text which puts in plain language the main idea of the section 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 a section to enhanced a block of text either as a pull quote or as a highlight.
Guidelines
- Should be embedded in a section component
- 75 characters (variation 4 allows a maximum of 280 characters)
HTML structure
Overall HTML view of a quote element inside a section:
div.section
div.quotePresets
Section with quote presets:
| Preset | Description |
|---|---|
| Quote | Default template. |
| Highlight | Default template. |
Variations
Section 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.