Example 1:
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Code:
<p class="f0">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="f1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="f2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="f3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>Example 2:
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Code:
<p class="f1-">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="f2-">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="f3-">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>Example 3 (Responsive Font Size):
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Code:
<p class="v1">Lorem Ipsum</p>
<p class="v2">Lorem Ipsum</p>
<p class="v3">Lorem Ipsum</p>
<p class="v4">Lorem Ipsum</p>
<p class="v5">Lorem Ipsum</p>
<p class="v6">Lorem Ipsum</p>
Example 1:
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply
dummy textof the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting ind.
Code:
<p>Lorem Ipsum is simply
<mark>dummy text</mark> of the printing and typesetting industry.
</p>
<p>Lorem Ipsum is simply
<del>dummy text</del> of the printing and typesetting industry.
</p>
<p>Lorem Ipsum is simply
<u>dummy text</u> of the printing and typesetting industry.
</p>
<p>Lorem Ipsum is simply
<ins>dummy text</ins> of the printing and typesetting industry.
</p>
<p>Lorem Ipsum is simply
<strong>dummy text</strong> of the printing and typesetting industry.
</p>
<p>Lorem Ipsum is simply
<small>dummy text</small> of the printing and typesetting industry.
</p>
<p>Lorem Ipsum is simply
<em>dummy text</em> of the printing and typesetting industry.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
<abbr title="Industry">ind.</abbr>
</p>Example 2:
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Code:
<blockquote>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<footer>
<cite title="Lorem Ipsum">Lorem Ipsum</cite>
</footer>
</blockquote>
Example 1:
- Item A
- Item B
- Item C
- Item D
- Item A
- Item B
- Item C
- Item D
Code:
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
<li>Item D</li>
</ul>
<dl>
<dt>Item A</dt>
<dd>Item B</dd>
<dt>Item C</dt>
<dd>Item D</dd>
</dl>Example 2:
Code:
<ul class="vmenu">
<li>
<a href="#">Item A</a>
</li>
<li>
<a href="#">Item B</a>
</li>
<li>
<a href="#">Item C</a>
</li>
<li>
<a href="#">Item D</a>
</li>
</ul>Example 2 (b):
Code:
<ul class="vmenu vin-hor cf">
<li>
<a href="#">Item A</a>
</li>
<li>
<a href="#">Item B</a>
</li>
<li>
<a href="#">Item C</a>
</li>
<li>
<a href="#">Item D</a>
</li>
</ul>Example 3:
Code:
<ul class="vmenu vin-blocks">
<li>
<a href="#">Item A</a>
</li>
<li>
<a href="#">Item B</a>
</li>
<li>
<a href="#">Item C</a>
</li>
<li>
<a href="#">Item D</a>
</li>
</ul>Example 4:
Code:
<ul class="vmenu vin-cells">
<li>
<a href="#">Item A</a>
</li>
<li>
<a href="#">Item B</a>
</li>
<li>
<a href="#">Item C</a>
</li>
<li>
<a href="#">Item D</a>
</li>
</ul>
Example:
Align text to center.
Align text to the center in large.
Align text to the right in Medium.
Align text to the right in small.
Code:
<p class="vtex-ac">Align text to center.</p>
<p class="vl-tex-ac">Align text to the center in large.</p>
<p class="vm-tex-ar vs-tex-ac">Align text to the right in Medium.</p>
<p class="vs-tex-ar">Align text to the right in small.</p>
Example:
Header h1, .h1
Header h2, .h2
Header h3, .h3
Header h4, .h4
Header h5, .h5
Header h6, .h6
Paragraph Text
Code:
<h1>Header h1, .h1</h1>
<h2>Header h2, .h2</h2>
<h3>Header h3, .h3</h3>
<h4>Header h4, .h4</h4>
<h5>Header h5, .h5</h5>
<h6>Header h6, .h6</h6>
<p>Paragraph Text</p>
