Typography
Headings
Headline large
Headline medium
Headline small
<h1 class="heading-l">Headline large</h1>
<h2 class="heading-m">Headline medium</h2>
<h3 class="heading-s">Headline small</h3>
Body copy
The default font-size
is 16px with a line-height
of 25px. Additionally all paragraphs have a bottom margin of 30px.
Perspiciatis repellat itaque unde temporibus aperiam quibusdam, iusto ab distinctio repudiandae laudantium harum recusandae aut accusantium, dolore molestiae deserunt adipisci odio laborum. Omnis sunt vel, ducimus alias quae blanditiis nemo maxime et consequuntur molestias eos porro culpa placeat qui corporis eaque ipsum, labore veniam?
Alias reprehenderit incidunt ex iste, quo dolorem quibusdam reiciendis omnis ipsum quae assumenda magnam aspernatur delectus placeat blanditiis praesentium repellendus, saepe aut. Deleniti necessitatibus suscipit dolores dolore quos earum error fugit ullam velit expedita optio et laboriosam nisi nemo ad, accusamus, delectus, temporibus minus.
Iste nostrum ducimus culpa esse illum sunt, fugit numquam quidem tempora, ipsa alias molestias, corrupti saepe voluptate vitae est aspernatur dicta minima! Molestiae eos, assumenda incidunt nemo culpa, nam qui iusto soluta deserunt modi temporibus, aliquid quod. Temporibus rem quisquam, esse delectus saepe iste!
<p>Perspiciatis repellat itaque unde temporibus aperiam quibusdam, iusto ab distinctio repudiandae laudantium harum recusandae aut accusantium, dolore molestiae deserunt adipisci odio laborum. Omnis sunt vel, ducimus alias quae blanditiis nemo maxime et consequuntur molestias eos porro culpa placeat qui corporis eaque ipsum, labore veniam?</p>
<p>Alias reprehenderit incidunt ex iste, quo dolorem quibusdam reiciendis omnis ipsum quae assumenda magnam aspernatur delectus placeat blanditiis praesentium repellendus, saepe aut. Deleniti necessitatibus suscipit dolores dolore quos earum error fugit ullam velit expedita optio et laboriosam nisi nemo ad, accusamus, delectus, temporibus minus.</p>
<p>Iste nostrum ducimus culpa esse illum sunt, fugit numquam quidem tempora, ipsa alias molestias, corrupti saepe voluptate vitae est aspernatur dicta minima! Molestiae eos, assumenda incidunt nemo culpa, nam qui iusto soluta deserunt modi temporibus, aliquid quod. Temporibus rem quisquam, esse delectus saepe iste!</p>
Blockquotes
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</blockquote>
Lists
Unordered list
An unordered list represents a collection of items that do not have any particular order.
- Lorem ipsum dolor sit amet
- Consectetur adipisicing elit
- Vero officiis doloribus illo et fuga
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipisicing elit</li>
<li>Vero officiis doloribus illo et fuga</li>
</ul>
Ordered list
An ordered list represents a collection of items that do have order and will be displayed with a preceding number.
- Omnis quos quisquam at et
- Qui ad nesciunt
- Odio perferendis consequatur a
<ol>
<li>Omnis quos quisquam at et</li>
<li>Qui ad nesciunt</li>
<li>Odio perferendis consequatur a</li>
</ol>