Example 1:
First Box
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Code:
<ul class="vl-flex vm-flex">
<li class="vcol vl-7 vflex vfle-dc vjus-cc">
<p>First Box</p>
</li>
<li class="vcol">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</li>
</ul>
Example 1:
- One
- Two
- Three
Code:
<ul class="vcel" style="--columns:12">
<li style="--col:2;--col-end:13">One</li>
<li style="--col:1;--col-end:7;--row:2">Two</li>
<li style="--col:6;--col-end:13;--row:3">Three</li>
</ul>
Example:
Code:
<form>
<ul class="vrow">
<li class="vl-12 vcol">
<p>
<input id="inputA" type="text" class="vbor-b vfield" placeholder="What's your input?" />
<label for="inputA" data-vlabel="Input Label"></label>
</p>
</li>
</ul>
<ul class="vrow">
<li class="vl-4 vcol">
<p>
<input id="inputB" type="text" class="vbor-b vfield vani" placeholder="What's your input?" />
<label for="inputB" data-vlabel="Input Label"></label>
</p>
</li>
<li class="vl-4 vcol">
<p>
<input id="inputC" type="text" class="vbor-b vfield vani" placeholder="What's your input?" />
<label for="inputC" data-vlabel="Input Label"></label>
</p>
</li>
<li class="vl-4 vcol">
<ul class="vrow vcol-0">
<li class="vl-9 vm-9 vs-9 vcol">
<p>
<input id="inputD" type="text" class="vbor-b vfield vani" placeholder="What's your input?" />
<label for="inputD" data-vlabel="Input Label"></label>
</p>
</li>
<li class="vl-3 vm-3 vs-3 vcol">
<p>
<label for="website" class="vsuf">.com</label>
</p>
</li>
</ul>
</li>
</ul>
<div class="vrow">
<div class="vl-12 vcol">
<p>
<select id="selectA" class="vbor-b vfield">
<option value=""></option>
<option value="value1">One</option>
<option value="value2">Two</option>
<option value="value3">Three</option>
<option value="value4">Four</option>
</select>
<label for="selectA" data-vlabel="Select"></label>
</p>
</div>
</div>
<div class="vrow">
<div class="vl-6 vcol">
<label>Label</label>
<ul class="vin-blocks">
<li>
<input type="radio" id="inputRed" name="inputKey">
<label for="inputRed">Red</label>
</li>
<li>
<input type="radio" id="inputBlue" name="inputKey">
<label for="inputBlue">Blue</label>
</li>
</ul>
</div>
<div class="vl-6 vcol">
<label>Label</label>
<ul class="vin-blocks">
<li>
<input id="checkbox1" type="checkbox" name="inputKey">
<label for="checkbox1">Checkbox 1</label>
</li>
<li>
<input id="checkbox2" type="checkbox" name="inputKey">
<label for="checkbox2">Checkbox 2</label>
</li>
</ul>
</div>
</div>
<div class="vrow">
<div class="vl-12 vcol">
<p>
<textarea id="textareaA" class="vbor-b vfield" placeholder="What's your input?"></textarea>
<label for="inputA" data-vlabel="Textarea"></label>
</p>
</div>
</div>
</form>
Example 1:
Code:
<p>
<a class="button" href="#">Button</a>
</p>
<p>
<a class="button vm" href="#">Button Medium</a>
</p>
<p>
<a class="button vl" href="#">Button Large</a>
</p>
<p>
<a class="button vbor" href="#">Button Border</a>
</p>
<p>
<a class="button vbor vm" href="#">Button Border Medium</a>
</p>
<p>
<a class="button vbor vl" href="#">Button Border Large</a>
</p>
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>
