Format Components

    • Example:

      • Content segment #8. Link

      • Content segment #7.

      • Content segment #6.

      • Content segment #5.

      • Content segment #4.

      • 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-div" class="vaccordion vacc-divs">
        <li class="vacc-nav vhas-dd vddb vove-h active">
        <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 active">
        <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 active">
        <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 active">
        <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 active">
        <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 active">
        <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>
    ©
      • Los Angeles

      • CA

      • United States

    • Website

    • Facebook

    • Format Components | Frontend UI Toolkit + Wordpress Framework

    • A wordpress framework used to structure simple Javascript and CSS prototypes. Hive is lite, only includes necessities and encourages custom styling.