skip to content

Type

Headings

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.