Design System
Headings
h1. Done! heading
h2. Done! heading
h3. Done! heading
h4. Done! heading
h5. Done! heading
h6. Done! heading
<h1>h1. Done! heading</h1>
<h2>h2. Done! heading</h2>
<h3>h3. Done! heading</h3>
<h4>h4. Done! heading</h4>
<h5>h5. Done! heading</h5>
<h6>h6. Done! heading</h6>
Display Headings
Display 1
Display 2
Display 3
Display 4
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
Headings and Title
Arctic Heading
Arctic Heading Title
Arctic Heading Muted
Arctic Heading Label
<h3 class="heading">Arctic Heading</h3>
<h3 class="heading-title">Arctic Heading Title</h3>
Lead
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>
Inline Text Elements
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
Blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat distinctio possimus ducimus ex quos eaque nobis, doloribus ut quae? Facere sint consequatur eos soluta iusto excepturi laudantium deserunt cum fugiat.
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Integer posuere erat a ante.
</p>
<footer class="blockquote-footer">
Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
<blockquote class="blockquote blockquote-primary">
<p class="mb-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat
distinctio possimus ducimus ex quos eaque nobis, doloribus ut
quae? Facere sint consequatur eos soluta iusto excepturi
laudantium deserunt cum fugiat.
</p>
<footer class="blockquote-footer">Jhone Will</footer>
</blockquote>
Blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat distinctio possimus ducimus ex quos eaque nobis, doloribus ut quae? Facere sint consequatur eos soluta iusto excepturi laudantium deserunt cum fugiat.
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Integer posuere erat a ante.
</p>
<footer class="blockquote-footer">
Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
<blockquote class="blockquote blockquote-primary">
<p class="mb-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat
distinctio possimus ducimus ex quos eaque nobis, doloribus ut
quae? Facere sint consequatur eos soluta iusto excepturi
laudantium deserunt cum fugiat.
</p>
<footer class="blockquote-footer">Jhone Will</footer>
</blockquote>
Font Size
font size 10px to 78px
Font Size 10px
Font Size 11px
Font Size 12px
Font Size 13px
..
..
..
..
Font Size 30px
Font Size 40px
Font Size 50px
Font Size 60px
Font Size 78px
<p class="text-10">Font Size 10px </p>
<p class="text-11">Font Size 11px </p>
<p class="text-12">Font Size 12px </p>
<p class="text-13">Font Size 13px </p>
<p class="text-30">Font Size 30px </p>
<p class="text-40">Font Size 40px </p>
<p class="text-50">Font Size 50px </p>
<p class="text-60">Font Size 60px </p>
<p class="text-78">Font Size 78px </p>
All rights reserved © UI Lib 2020
