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 1:
Table Header Table Header Table Header Table Header Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here Code:
<table>
<thead>
<tr>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Header">Content Goes Here</td>
<td data-th="Header">Donec id elit non mi porta gravida at eget metus.</td>
<td data-th="Header">Content Goes Here</td>
<td data-th="Header">Content Goes Here</td>
</tr>
<tr>
<td data-th="Header">Content Goes Here</td>
<td data-th="Header">Donec id elit non mi porta gravida at eget metus.</td>
<td data-th="Header">Content Goes Here</td>
<td data-th="Header">Content Goes Here</td>
</tr>
<tr>
<td data-th="Header">Content Goes Here</td>
<td data-th="Header">Donec id elit non mi porta gravida at eget metus.</td>
<td data-th="Header">Content Goes Here</td>
<td data-th="Header">Content Goes Here</td>
</tr>
</tbody>
</table>
Example 1:
Box A
Box B
Vertically AlignBox C
Box D
Box E
Box F
Code:
<ul class="vgri vl-3 vm-2 vs-1 vali-v">
<li>
<p>Box A</p>
</li>
<li>
<p>Box B</p>
</li>
<li>
<p>Box C</p>
</li>
<li>
<p>Box D</p>
</li>
<li>
<p>Box E</p>
</li>
<li>
<p>Box F</p>
</li>
</ul>
Example 1:
Large 4 | Medium 4
Large 4 | Medium 4
Large 4 | Medium 4
Code:
<div class="vrow">
<div class="vcol vl-4 vm-4">
<p>Large 4 | Medium 4</p>
</div>
<div class="vcol vl-4 vm-4">
<p>Large 4 | Medium 4</p>
</div>
<div class="vcol vl-4 vm-4">
<p>Large 4 | Medium 4</p>
</div>
</div>Example 2:
Large 2
Medium 6Large 2
Medium 6Large 2
Medium 6Large 2
Medium 6Large 2
Medium 6Large 2
Medium 6Code:
<div class="vrow">
<div class="vcol vl-2 vm-6">
<p>Large 2 | Medium 6</p>
</div>
<div class="vcol vl-2 vm-6">
<p>Large 2 | Medium 6</p>
</div>
<div class="vcol vl-2 vm-6">
<p>Large 2 | Medium 6</p>
</div>
<div class="vcol vl-2 vm-6">
<p>Large 2 | Medium 6</p>
</div>
<div class="vcol vl-2 vm-6">
<p>Large 2 | Medium 6</p>
</div>
<div class="vcol vl-2 vm-6">
<p>Large 2 | Medium 6</p>
</div>
<div class="vcol vl-2 vm-6">
<p>Large 2 | Medium 6</p>
</div>
</div>Example 3:
A
B
Code:
<div class="vrow">
<div class="vcol vl-7 vm-7 vs-6 vl-r5 vm-r5 vs-r6">
<p>A</p>
</div>
<div class="vcol vl-5 vm-5 vs-6 vl-l7 vm-l7 vs-l6">
<p>B</p>
</div>
</div>
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>
