Typography

Published at 2021-02-21 17:09:49 Updated on pzplUI 2.2

Display Classes

Lorem ipsum dolor sit amet.

<h1 class="d1">Lorem ipsum dolor sit amet.</h1>
<h1 class="d2">Lorem ipsum dolor sit amet.</h1>
<h1 class="d3">Lorem ipsum dolor sit amet.</h1>
<h1 class="d4">Lorem ipsum dolor sit amet.</h1>
<h1 class="d5">Lorem ipsum dolor sit amet.</h1>
<h1 class="d6">Lorem ipsum dolor sit amet.</h1>

Text marker

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus explicabo libero obcaecati neque ratione distinctio?

<h3>Lorem ipsum, dolor sit amet <mark>consectetur</mark> adipisicing elit. Voluptatibus explicabo libero obcaecati neque ratione distinctio?</h3>

Small and muted text

Lorem ipsum, dolor sit amet consectetur adipisicing. Voluptatem adipisci officia non!

<h1>Lorem ipsum, dolor sit amet consectetur adipisicing. <small class="text-muted">Voluptatem adipisci officia non!</small></h1>

Other tags

Hello World
To save your file press Ctrl+S

<abbr title="Some additiona text">Hello World</abbr><br>
To save your file press <kbd>Ctrl+S</kbd>

Blocks

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur, hic quisquam placeat at ad nihil?

<div class="block">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur, hic quisquam placeat at ad nihil?
</div>
<div class="block">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur, hic quisquam placeat at ad nihil?
</div>
<div class="block">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur, hic quisquam placeat at ad nihil?
</div>
<br>
<div class="block-sm">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur, hic quisquam placeat at ad nihil?
</div>
<div class="block-sm">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur, hic quisquam placeat at ad nihil?
</div>
<div class="block-sm">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur, hic quisquam placeat at ad nihil?
</div>
<br>
<div class="block-lg">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur, hic quisquam placeat at ad nihil?
</div>
<div class="block-lg">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur, hic quisquam placeat at ad nihil?
</div>
<div class="block-lg">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur, hic quisquam placeat at ad nihil?
</div>

Text aligns

Hello World

<h3 class="text-center">Hello World</h3>
<br>
<hr><br>
<h3 class="text-right">Hello World</h3>