Example:
Code:
<div class="qinstance get-qsegments slider-category-format categories">
<div id="category-2-1" class="vslider catid-16 term-category-2" style data-vsettings="tween:vmoveIaRa">
<ul id="category-2-1-div" class="vsli-divs vpos-r vgri vl-2 vm-2 vs-2 vove-h">
<li id="qsegments-74" class="vsli-div qsegments ">
<p>Content segment #8.
<a href="http://google.com" target="_blank">Link</a>
</p>
</li>
<li id="qsegments-73" class="vsli-div qsegments ">
<p>Content segment #7.</p>
</li>
<li id="qsegments-72" class="vsli-div qsegments ">
<p>Content segment #6.</p>
</li>
<li id="qsegments-65" class="vsli-div qsegments ">
<p>Content segment #5.</p>
</li>
<li id="qsegments-64" class="vsli-div qsegments ">
<p>Content segment #4.</p>
</li>
</ul>
<ul class="vsli-nav vrow cf" data-vcontrol="category-2-1">
<li class="vl-3 vm-3 vs-6 vcol vtex-al">
<p>
<a class="vsli-tag varr vl" href="#prev"></a>
</p>
</li>
<li class="vl-3 vm-3 vs-6 vcol vl-r6 vm-r6 vtex-ar">
<p>
<a class="vsli-tag varr vr" href="#next"></a>
</p>
</li>
<li class="vl-6 vm-6 vs-12 vcol vl-l3 vm-l3 vtex-ac">
<ul class="vsli-dots cf"></ul>
</li>
</ul>
</div>
</div>
Accordion Example:
Code:
<div class="qinstance get-qsegments accordion-category-format categories">
<div class="catid-16 term-category-2">
<ul id="category-2-3" class="vaccordion vacc-divs " style data-vsettings>
<li class="vacc-nav vhas-dd vddb vove-h">
<a class="vacc-title" href="#74-category-2-3">Segment 8</a>
<div id="74-category-2-3" class="vacc-div vani-d2 vani-d1- vani vmoveIaUa ">
<p>Content segment #8.
<a href="http://google.com" target="_blank">Link</a>
</p>
</div>
</li>
<li class="vacc-nav vhas-dd vddb vove-h">
<a class="vacc-title" href="#73-category-2-3">Segment 7</a>
<div id="73-category-2-3" class="vacc-div vani-d2 vani-d1- vani vmoveIaUa ">
<p>Content segment #7.</p>
</div>
</li>
<li class="vacc-nav vhas-dd vddb vove-h">
<a class="vacc-title" href="#72-category-2-3">Segment 6</a>
<div id="72-category-2-3" class="vacc-div vani-d2 vani-d1- vani vmoveIaUa ">
<p>Content segment #6.</p>
</div>
</li>
<li class="vacc-nav vhas-dd vddb vove-h">
<a class="vacc-title" href="#65-category-2-3">Segment 5</a>
<div id="65-category-2-3" class="vacc-div vani-d2 vani-d1- vani vmoveIaUa ">
<p>Content segment #5.</p>
</div>
</li>
<li class="vacc-nav vhas-dd vddb vove-h">
<a class="vacc-title" href="#64-category-2-3">Segment 4</a>
<div id="64-category-2-3" class="vacc-div vani-d2 vani-d1- vani vmoveIaUa ">
<p>Content segment #4.</p>
</div>
</li>
</ul>
</div>
</div>
Horizontal Tabs Example:
Content segment #8. Link
Content segment #7.
Content segment #6.
Content segment #5.
Content segment #4.
Code:
<div class="qinstance get-qsegments tabs-category-format categories">
<div class="catid-16 term-category-2">
<div id="category-2-5" class="vtabs vrow vcol-0">
<div class="vl-12 vcol">
<div class="vscr">
<div class="vscr-x">
<ul id="category-2-5-nav" class="vtab-nav vmenu vin-blocks vwhi-snw">
<li class="vtab-title">
<a href="#74-category-2-5">Segment 8</a>
</li>
<li class="vtab-title">
<a href="#73-category-2-5">Segment 7</a>
</li>
<li class="vtab-title">
<a href="#72-category-2-5">Segment 6</a>
</li>
<li class="vtab-title">
<a href="#65-category-2-5">Segment 5</a>
</li>
<li class="vtab-title">
<a href="#64-category-2-5">Segment 4</a>
</li>
</ul>
</div>
</div>
</div>
<div class="vl-12 vcol">
<ul id="category-2-5-div" class="vtab-divs vove-h">
<li id="74-category-2-5" class="vtab-div vani-d2 vani-d1- vani vfadeIa ">
<p>Content segment #8.
<a href="http://google.com" target="_blank">Link</a>
</p>
</li>
<li id="73-category-2-5" class="vtab-div vani-d2 vani-d1- vani vfadeIa ">
<p>Content segment #7.</p>
</li>
<li id="72-category-2-5" class="vtab-div vani-d2 vani-d1- vani vfadeIa ">
<p>Content segment #6.</p>
</li>
<li id="65-category-2-5" class="vtab-div vani-d2 vani-d1- vani vfadeIa ">
<p>Content segment #5.</p>
</li>
<li id="64-category-2-5" class="vtab-div vani-d2 vani-d1- vani vfadeIa ">
<p>Content segment #4.</p>
</li>
</ul>
</div>
</div>
</div>
</div>Vertical Tabs Example:
Content segment #8. Link
Content segment #7.
Content segment #6.
Content segment #5.
Content segment #4.
Code:
<div class="qinstance get-qsegments vtabs-category-format categories">
<div class="catid-16 term-category-2">
<div id="category-2-7" class="vtabs vrow vcol-0">
<div class="vl-4 vm-4 vcol">
<div class="vscr">
<div class="vscr-x">
<ul id="category-2-7-nav" class="vtab-nav vmenu vs-in-blocks vwhi-snw">
<li class="vtab-title">
<a href="#74-category-2-7">Segment 8</a>
</li>
<li class="vtab-title">
<a href="#73-category-2-7">Segment 7</a>
</li>
<li class="vtab-title">
<a href="#72-category-2-7">Segment 6</a>
</li>
<li class="vtab-title">
<a href="#65-category-2-7">Segment 5</a>
</li>
<li class="vtab-title">
<a href="#64-category-2-7">Segment 4</a>
</li>
</ul>
</div>
</div>
</div>
<div class="vl-8 vm-8 vcol">
<ul id="category-2-7-div" class="vtab-divs vove-h">
<li id="74-category-2-7" class="vtab-div vani-d2 vani-d1- vani vmoveIaUa ">
<p>Content segment #8.
<a href="http://google.com" target="_blank">Link</a>
</p>
</li>
<li id="73-category-2-7" class="vtab-div vani-d2 vani-d1- vani vmoveIaUa ">
<p>Content segment #7.</p>
</li>
<li id="72-category-2-7" class="vtab-div vani-d2 vani-d1- vani vmoveIaUa ">
<p>Content segment #6.</p>
</li>
<li id="65-category-2-7" class="vtab-div vani-d2 vani-d1- vani vmoveIaUa ">
<p>Content segment #5.</p>
</li>
<li id="64-category-2-7" class="vtab-div vani-d2 vani-d1- vani vmoveIaUa ">
<p>Content segment #4.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
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>
