Заголовок H1

Заголовок H2

Заголовок H3

Заголовок H4

Заголовок H5

Заголовок H6

Safe fonts

Link Link

Link Link

Lorem ipsum dolor sit amet mark mark mark adipisicing elit. Commodi i i i i i i optio id, b b b b b b b fugiat modi necessitatibus link link link adipisci impedit quasi, earum var var var enim sed laboriosam, s s s s s s ipsa voluptates odit code code code nostrum fugit. cumque nulla kbd kbd kbd samp samp samp excepturi u u u u u u quos!

pre pre pre pre pre pre pre pre pre pre pre
pre pre pre pre pre pre pre pre pre pre pre

• .t-overline
• .t-strike
• .t-underline
• .t-underline .t-decoration-double
• .t-underline .t-decoration-wavy
• .t-underline .t-decoration-dashed
• .t-underline .t-decoration-dotted
• .t-underline .t-underline-offset8px

blockquote blockquote blockquote blockquote link link link blockquote blockquote blockquote blockquote blockquote

.t-rtl

Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet t-writing-vlr .t-writing-vlr adipisicing t-writing-vrl .t-writing-vrl. Commodi nisi optio id, quas maxime repudiandae fugiat modi necessitatibus consectetur dicta adipisci impedit quasi, earum soluta vitae enim sed laboriosam, ipsa voluptates odit porro totam nostrum fugit.

Berry p.drop-cap ommodi nisi optio id, quas maxime repudiandae fugiat modi necessitatibus consectetur dicta adipisci impedit quasi, earum soluta vitae enim sed laboriosam, ipsa voluptates odit porro totam nostrum fugit. Lorem ipsum dolor sit amet. Commodi nisi optio id, quas maxime repudiandae fugiat modi necessitatibus consectetur dicta adipisci impedit quasi, earum soluta vitae enim sed laboriosam, ipsa voluptates odit porro totam nostrum fugit.

• t-bold100
• t-bold200
• t-bold300
• t-bold400 / t-bold-normal
• t-bold500
• t-bold600
• t-bold700 / t-bold
• t-bold800
• t-bold900

• t-small-caps ↝ font-variant: small-caps Lorem ipsum dolor sit amet
• t-capitalize ↝ text-transform: capitalize Lorem ipsum dolor sit amet
• t-upper ↝ text-transform: uppercase Lorem ipsum dolor sit amet
• t-lower ↝ text-transform: lowercase Lorem ipsum dolor sit amet

✿ ❀ ❁

<h1>Заголовок H1</h1>
<h2>Заголовок H2</h2>
<h3>Заголовок H3</h3>
<h4>Заголовок H4</h4>
<h5>Заголовок H5</h5>
<h6>Заголовок H6</h6>

<hr>

<h3><a class="icon-arrow-right" href="https://www.cssfontstack.com/" target="_blank">Safe fonts</a></h3>

<div class="b-flex flex-wrap t180">
    <p class="mar20-r t-georgia">t-georgia</p>
    <p class="mar20-r t-palatino">t-palatino</p>
    <p class="mar20-r t-times">t-times</p>
    <p class="mar20-r t-arial">t-arial</p>
    <p class="mar20-r t-arial-black">t-arial-black</p>
    <p class="mar20-r t-comic">t-comic</p>
    <p class="mar20-r t-impact">t-impact</p>
    <p class="mar20-r t-tahoma">t-tahoma</p>
    <p class="mar20-r t-trebuchet">t-trebuchet</p>
    <p class="mar20-r t-verdana">t-verdana</p>
    <p class="mar20-r t-mono">t-mono</p>
</div>

<hr>

<p><a class="icon-arrow-left" href="#">Link</a> <a class="icon-arrow-right mar20-l" href="#">Link</a></p>
<p><a class="icon-angle-left" href="#">Link</a> <a class="icon-angle-right mar20-l" href="#">Link</a></p>

<hr>

<p>Lorem ipsum dolor sit amet <mark>mark mark mark</mark> adipisicing elit. Commodi <i>i i i i i i</i> optio id, <b>b b b b b b b </b> fugiat modi necessitatibus <a href="#">link link link</a> adipisci impedit quasi, earum <var>var var var</var> enim sed laboriosam, <s>s s s s s s</s> ipsa voluptates odit <code>code code code</code> nostrum fugit. cumque nulla <kbd>kbd kbd kbd</kbd> <samp>samp samp samp</samp> excepturi <u>u u u u u u </u> quos!</p>

<pre>
pre pre pre pre pre pre pre pre pre pre pre
pre pre pre pre pre pre pre pre pre pre pre
</pre>

<ul class="list-unstyled mar40-tb lh200">
    <li><span class="t-overline">.t-overline</span></li>
    <li><span class="t-strike">.t-strike</span></li>
    <li><span class="t-underline">.t-underline</span></li>
    <li><span class="t-underline t-decoration-double">.t-underline .t-decoration-double</span></li>
    <li><span class="t-underline t-decoration-wavy">.t-underline .t-decoration-wavy</span></li>
    <li><span class="t-underline t-decoration-dashed">.t-underline .t-decoration-dashed</span></li>
    <li><span class="t-underline t-decoration-dotted">.t-underline .t-decoration-dotted</span></li>
    <li><span class="t-underline t-underline-offset8px">.t-underline .t-underline-offset8px</span></li>
</ul>

<blockquote>blockquote blockquote blockquote blockquote <a href="#">link link link</a> blockquote blockquote blockquote blockquote blockquote</blockquote>

<h3>.t-rtl</h3>

<p class="t-rtl">Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

<p>Lorem ipsum dolor sit amet <span class="t-writing-vlr">t-writing-vlr</span> <code>.t-writing-vlr</code> adipisicing <span class="t-writing-vrl">t-writing-vrl</span> <code>.t-writing-vrl</code>. Commodi nisi optio id, quas maxime repudiandae fugiat modi necessitatibus consectetur dicta adipisci impedit quasi, earum soluta vitae enim sed laboriosam, ipsa voluptates odit porro totam nostrum fugit.</p>

<p class="drop-cap">Berry <code>p.drop-cap</code> ommodi nisi optio id, quas maxime repudiandae fugiat modi necessitatibus consectetur dicta adipisci impedit quasi, earum soluta vitae enim sed laboriosam, ipsa voluptates odit porro totam nostrum fugit. Lorem ipsum dolor sit amet. Commodi nisi optio id, quas maxime repudiandae fugiat modi necessitatibus consectetur dicta adipisci impedit quasi, earum soluta vitae enim sed laboriosam, ipsa voluptates odit porro totam nostrum fugit.</p>

<hr>

<div style="--grid-columns: minmax(140px, 20%) auto">
    <div class="grid-2col gap20 t-tracking-50 mar10-b"><code>.t-tracking-50</code> <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span></div>
    <div class="grid-2col gap20 t-tracking-25 mar10-b"><code>.t-tracking-25</code> <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span></div>
    <div class="grid-2col gap20 t-tracking0 mar10-b"><code>.t-tracking0</code> <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span></div>
    <div class="grid-2col gap20 t-tracking25 mar10-b"><code>.t-tracking25</code> <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span></div>
    <div class="grid-2col gap20 t-tracking50 mar10-b"><code>.t-tracking50</code> <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span></div>
    <div class="grid-2col gap20 t-tracking100 mar10-b"><code>.t-tracking100</code> <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span></div>
    <div class="grid-2col gap20 t-tracking150 mar10-b"><code>.t-tracking150</code> <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span></div>
    <div class="grid-2col gap20 t-tracking200 mar10-b"><code>.t-tracking200</code> <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span></div>
</div>

<hr>

<ul>
    <li class="t-bold100 mar5-b">t-bold100</li>
    <li class="t-bold200 mar5-b">t-bold200</li>
    <li class="t-bold300 mar5-b">t-bold300</li>
    <li class="t-bold400 mar5-b">t-bold400 / t-bold-normal</li>
    <li class="t-bold500 mar5-b">t-bold500</li>
    <li class="t-bold600 mar5-b">t-bold600</li>
    <li class="t-bold700 mar5-b">t-bold700 / t-bold</li>
    <li class="t-bold800 mar5-b">t-bold800</li>
    <li class="t-bold900 mar5-b">t-bold900</li>
</ul>

<hr>

<ul>
    <li><code>t-small-caps</code> ↝ <code>font-variant: small-caps</code> <span class="t-small-caps">Lorem ipsum dolor sit amet</span></li>
    <li><code>t-capitalize</code> ↝ <code>text-transform: capitalize</code> <span class="t-capitalize">Lorem ipsum dolor sit amet</span></li>
    <li><code>t-upper</code> ↝ <code>text-transform: uppercase</code> <span class="t-upper">Lorem ipsum dolor sit amet</span></li>
    <li><code>t-lower</code> ↝ <code>text-transform: lowercase</code> <span class="t-lower">Lorem ipsum dolor sit amet</span></li>
</ul>

<hr class="dashed">
<hr class="dotted">
<hr class="double bor3">

<hr>

<p><span class="t200 bg-primary700 t-white icon-circle">✿</span> <span class="t200 bg-red700 t-white icon-square">❀</span> <span class="t200 bg-green600 t-white icon-rounded">❁</span></p>