Type
Headings
Light theme
| Markup |
Demo |
<h1>Who can I vote for</h1>
|
Who can I vote for?
|
<h2>Who can I vote for</h2>
|
Who can I vote for?
|
<h3>Who can I vote for</h3>
|
Who can I vote for?
|
<h4>Who can I vote for</h4>
|
Who can I vote for?
|
<h5>Who can I vote for</h5>
|
Who can I vote for?
|
Dark theme
Invoke the dark theme on any component by applying class="ds-dark" to a container element.
| Markup |
Demo |
<h1>Who can I vote for</h1>
|
Who can I vote for?
|
<h2>Who can I vote for</h2>
|
Who can I vote for?
|
<h3>Who can I vote for</h3>
|
Who can I vote for?
|
<h4>Who can I vote for</h4>
|
Who can I vote for?
|
<h5>Who can I vote for</h5>
|
Who can I vote for?
|
Classes in the form .ds-[heading level] (e.g. .ds-h2) are provided to match heading font sizes where the use of a semantic heading is not appropriate. Headings should only be used to introduce sections of content.
Paragraphs
| Markup |
Demo |
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro voluptatum inventore fugiat, esse ducimus enim totam numquam adipisci? Ipsa cum sequi iste ex eius magni <a href="#">culpa praesentium</a> aliquam magnam temporibus.</p>
|
Light theme
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro voluptatum inventore fugiat, esse ducimus enim totam numquam adipisci? Ipsa cum sequi iste ex eius magni culpa praesentium aliquam magnam temporibus.
Dark theme
Invoke the dark theme on any component by applying class="ds-dark" to a container element.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro voluptatum inventore fugiat, esse ducimus enim totam numquam adipisci? Ipsa cum sequi iste ex eius magni culpa praesentium aliquam magnam temporibus.
|
Blockquotes
| Markup |
Demo |
<blockquote>Porro voluptatum inventore fugiat, esse ducimus enim totam numquam adipisci? Ipsa cum sequi iste ex eius magni aliquam magnam temporibus.</blockquote>
|
Light theme
Porro voluptatum inventore fugiat, esse ducimus enim totam numquam adipisci? Ipsa cum sequi iste ex eius magni aliquam magnam temporibus.
Dark theme
Invoke the dark theme on any component by applying class="ds-dark" to a container element.
Porro voluptatum inventore fugiat, esse ducimus enim totam numquam adipisci? Ipsa cum sequi iste ex eius magni aliquam magnam temporibus.
|