VARZ demo

VARZ CSS framework demo

Everything you see on this page is built using VARZ CSS framework - classless CSS library.

Table of Contents

Text Table Of Contents ⤴

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraphs

This is a regular paragraph with bold text, italic text, and a hyperlink. It also contains inline code.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Unordered Lists (with nesting)

  • First level item
  • Second level item with nested list:
    • Second level - item 1
    • Second level - item 2 with deeper nesting:
      • Third level - item A
      • Third level - item B
      • Third level - item C
    • Second level - item 3
  • Third first-level item
  • Item with bold and italic text

Ordered Lists (with nesting)

  1. First main step
  2. Second main step with sub-steps:
    1. Sub-step one
    2. Sub-step two with even deeper list:
      1. Deep item 1
      2. Deep item 2
    3. Sub-step three
  3. Third main step
  4. Final step containing code example

Blockquote

The only way to do great work is to love what you do.

— Steve Jobs

Preformatted Code

function deepNestedExample() {
    return {
        level1: {
            level2: {
                level3: "Deep content"
            }
        }
    };
}

Table

Head Head Head 1 Head 2
Data 1 Data data data 2
Sum 1000

Active class Table Of Contents ⤴ 

<button style="
  --p: 12px 16px;
  --c: var(--vz-c-accent);
  --bgc: transparent;
  --bc: var(--vz-c-accent);
  --bw: 3px;
  --bs: solid;
  --br: 8px;
"
type="button"
data-varz
data-vz-toggle="self"
>
  Self toggler:
  <span style="--p-vz-d: none;--d:inline-block;">
    Add 'active' class
  </span>
  <span style="--d:none;--p-vz-d: inline-block;">
    Remove 'active' class
  </span>
</button>
By clicking on button above you will add/remove (or toggle) 'active' class on the button itself and on this element in the same time. 
<button
  style="
--m: 0 0 16px;
--p: 12px 16px;
--c: var(--vz-c-accent);
--bgc: transparent;
--bc: var(--vz-c-accent);
--bw: 3px;
--bs: solid;
--br: 8px;
--vz-bgc: var(--vz-c-bg);
"
  type="button"
  data-varz
  data-vz-toggle="self,next"
  data-vz-deactivate-on="esc,click,scroll"
>
  Self and Element toggler
</button>
<div style="--vz-bgc: var(--vz-c-bg);">
  By clicking on button above you will add/remove (or toggle) 'active' class on the button itself and on this
  element in the same time.
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab architecto dolores eligendi esse eum excepturi expedita fuga harum, id nam optio, quisquam rerum sapiente ut. Eaque minus natus reiciendis! 
<button
  style="
--m: 0 0 16px;
--p: 12px 16px;
--c: var(--vz-c-accent);
--bgc: transparent;
--bc: var(--vz-c-accent);
--bw: 3px;
--bs: solid;
--br: 8px;
--vz-bgc:var(--vz-c-bg);
"
  type="button"
  data-varz
  data-vz-activate="self,next"
  data-vz-deactivate-on="esc,click,scroll"
>
  Self and Element activator
</button>
<div style="--vz-bgc:var(--vz-c-bg);">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit!
</div>

Navigation Table Of Contents ⤴

Links nav

<nav style="
    --d:flex;
    --flw: wrap;
    --g: 16px;
    --m: 0 0 16px 0;
    ">
  <a 
    class="vz"
    style="--c: var(--vz-c-accent);--hov-td:none;--hov-c:var(--vz-c-accent2);--vz-c:var(--vz-c-font);"
    href="#;" 
    data-varz
    data-vz-activate="self"
    data-vz-deactivate="siblings">
    Link 1
  </a>
  <a
    style="--c: var(--vz-c-accent);--hov-td:none;--hov-c:var(--vz-c-accent2);--vz-c:var(--vz-c-font);"
    href="#;" 
    data-varz
    data-vz-activate="self"
    data-vz-deactivate="siblings">
    Link 2
  </a>
  <a
    style="--c: var(--vz-c-accent);--hov-td:none;--hov-c:var(--vz-c-accent2);--vz-c:var(--vz-c-font);"
    href="#;" 
    data-varz
    data-vz-activate="self"
    data-vz-deactivate="siblings">
    Link 3
  </a>
</nav>

UL nav

<nav>
  <ul style="
    --d: flex;
    --flw: wrap;
    --g: 16px;
    --p: 0;
  ">
    <li class="vz"
      style="--d:inline-block;"
      data-varz
      data-vz-activate="self"
      data-vz-deactivate="siblings"
    >
      <a
        style="--c: var(--vz-c-accent);--hov-c:var(--vz-c-accent2);--hov-td:none;--p-vz-c:var(--vz-c-font);"
        href="#;"
      >
        Ul Link 1
      </a>
    </li>
    <li
      style="--d:inline-block;"
      data-varz
      data-vz-activate="self"
      data-vz-deactivate="siblings"
    >
      <a
        style="--c: var(--vz-c-accent);--hov-c:var(--vz-c-accent2);--hov-td:none;--p-vz-c:var(--vz-c-font);"
        href="#;"
      >
        Ul Link 2
      </a>
      <!--sub menu-->
      <ul style="
        --p: 16px 32px;
        --br: 4px;
        --bgc:var(--vz-c-bg);
        --pos: absolute;
        --d:none;
        --p-hov-d: block;
      ">
        <li>
          <a
            style="--c:var(--vz-c-font);--hov-td:none;--p-vz-c:var(--vz-c-font);"
            href="#;"
          >Test 1</a>
        </li>
        <li>
          <a
            style="--c:var(--vz-c-font);--hov-td:none;--p-vz-c:var(--vz-c-font);"
            href="#;"
          >Test 2</a>
        </li>
      </ul>
    </li>
    <li
      style="--d:inline-block;"
      data-varz
      data-vz-activate="self"
      data-vz-deactivate="siblings"
    >
      <a
        style="--c: var(--vz-c-accent);--hov-c:var(--vz-c-accent2);--hov-td:none;--p-vz-c:var(--vz-c-font);"
        href="#;"
      >
        Ul Link 3
      </a>
    </li>
  </ul>
</nav>

Modal, off canvas and popups Table Of Contents ⤴ 

<button type="button" style="
    --p: 20px 30px;
    --bg: var(--vz-c-accent);
    --c: var(--vz-c-white);
    --bw: 0;
    --br: 8px;
    --hov-bgc: var(--vz-c-accent2);
  "
  data-varz
  data-vz-activate="selector"
  data-vz-selector="#modal"
  data-vz-deactivate-on="esc,click"
  >
    Activate modal
</button>
<!--modal element - background-->
<div
  id="modal"
  style="
    --d: flex;
    --ai: center;
    --jc: center;
    --pos:fixed;
    --t: 0;
    --r: 0;
    --b: 0;
    --l: 0;
    --z: -1;
    --v: hidden;
    --o: 0;
    --vz-z: 2;
    --vz-o: 1;
    --vz-v: visible;
    ">
    <!--  overlay -->
    <button
        type="button"
        style="
      --bw: 0;
      --bfil: blur(10px);
      --pos: fixed;
      --t: 0;
      --r: 0;
      --b: 0;
      --l: 0;
      --z: -1;
      --v: hidden;
      --o: 0;
      --bg: rgba(0,0,0,.6);
      --p-vz-z: 2;
      --p-vz-o: 1;
      --p-vz-v: visible;
    "
    data-varz 
    data-vz-deactivate="selector" 
    data-vz-selector="#modal"></button>
    <!--  modal window-->
    <div style="
      --maw: 500px;
      --mah: 90%;
      --m: 20px;
      --d:flex;
      --fld: column;
      --bgc: var(--vz-c-light);
      --pos: relative;
      --z: 3;
      --br: 8px;
      --bw: 1px;
      --bc: var(--vz-c-border);
      --bs: solid;
    ">
    <!-- modal heading with the close button-->
    <h5 style="
      --fls: 0;
      --m: 0;
      --p: 8px 0 8px 16px;
      --d: flex;
      --ai: center;
      --jc: space-between;
      --bc: var(--vz-c-border);
      --bw: 0 0 1px 0;
      --bs: dotted;
    ">
      Modal Heading
      <button type="button" style="
        --bg: transparent;
        --bw: 0;
        --br: 50%;
        --c: var(--vz-c-dark);
        --w: 50px;
        --h: 50px;
        --m: 0 8px 0 0;
        --d: flex;
        --ai: center;
        --jc: center;
        --hov-bgc: var(--vz-c-bg);
        " 
        data-varz
        data-vz-deactivate="selector"
        data-vz-selector="#modal">
        <svg style="" xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 -960 960 960" width="40"><path d="m252.615-217.232-35.383-35.383L444.616-480 217.232-707.385l35.383-35.383L480-515.384l227.385-227.384 35.383 35.383L515.384-480l227.384 227.385-35.383 35.383L480-444.616 252.615-217.232Z"></path></svg>
      </button>
    </h5>
    <!-- modal content-->
    <div style="
      --oy: auto;
      --p:16px;
    ">
    <h4>This is a modal content</h4> 
        <p style="--m: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <!-- modal footer-->
    <div 
    style="
      --fls: 0;
      --bs: solid;
      --bc: var(--vz-c-border);
      --bw: 1px 0 0 0;
      --d: flex;
      --p: 16px;
      --g: 16px;
      --jc: flex-end;
      ">
      <button 
        type="button"
        data-varz
        data-vz-deactivate="selector"
        data-vz-selector="#modal"
        style="
        --p: 12px 24px;
        --br: 8px;
        --bw: 0;
        --bgc: var(--vz-c-bg);
        --c: var(--vz-c-font);
        --hov-bgc:var(--vz-c-border);
        ">
            Cancel
      </button>
      <button
        type="button"
        data-varz
        data-vz-deactivate="selector"
        data-vz-selector="#modal"
        style="
        --p: 12px 24px;
        --br: 8px;
        --bw: 0;
        --bgc: var(--vz-c-accent);
        --c: var(--vz-c-white);
        --hov-bgc:var(--vz-c-accent2);
        ">
        OK
      </button>
    </div>
  </div>
</div>
<button
  type="button" 
  style="
  --p: 20px 30px;
  --bg: var(--vz-c-accent);
  --c: var(--vz-c-white);
  --bw: 0;
  --br: 8px;
  --hov-bgc: var(--vz-c-accent2);
  "
  data-varz
  data-vz-activate="selector"
  data-vz-selector="#popup"
>
  Activate popup
</button>
<!--popup element-->
<div
  id="popup"
  style="
  --d: flex;
  --fld: column;
  --pos:fixed;
  --r: 16px;
  --b: 16px;
  --z: -1;
  --v: hidden;
  --o: 0;
  --maw:300px;
  --mah:90%;
  --br: 8px;
  --bgc:var(--vz-c-light);
  --bor: 1px solid var(--vz-c-border);
  --vz-z: 2;
  --vz-o: 1;
  --vz-v: visible;
">
  <!-- popup heading with the close button-->
  <h5
    style="
    --fls: 0;
    --m: 0;
    --p: 8px 0 8px 16px;
    --d: flex;
    --ai: center;
    --jc: space-between;
    --bc: var(--vz-c-border);
    --bw: 0 0 1px 0;
    --bs: dotted;
  ">
    Popup Heading
  <button
    type="button"
    style="
    --bg: transparent;
    --bw: 0;
    --c: var(--vz-c-dark);
    --w: 40px;
    --h: 40px;
    --m: 0 8px 0 0;
    --d: flex;
    --ai: center;
    --jc: center;
    --hov-c: var(--vz-c-border);
    " 
    data-varz 
    data-vz-deactivate="selector" 
    data-vz-selector="#popup">
      <svg style="--w:24px;--h:24px;" xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 -960 960 960" width="40"><path d="m252.615-217.232-35.383-35.383L444.616-480 217.232-707.385l35.383-35.383L480-515.384l227.385-227.384 35.383 35.383L515.384-480l227.384 227.385-35.383 35.383L480-444.616 252.615-217.232Z"></path></svg>
    </button>
  </h5>
  <!-- popup content-->
  <div
    style="
    --oy: auto;
    --p:16px;
    ">
    <h5>This is a popup content</h5>
    <p style="--m: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  </div>
  <!-- popup footer-->
  <div
    style="
    --fls: 0;
    --bs: solid;
    --bc: var(--vz-c-border);
    --bw: 1px 0 0 0;
    --d: flex;
    --p: 16px;
    --g: 16px;
    --jc: flex-end;
  ">
    <button
      type="button"
      data-varz 
      data-vz-deactivate="selector" 
      data-vz-selector="#popup"
      style="
      --p: 12px 24px;
      --br: 8px;
      --bw: 0;
      --bgc: var(--vz-c-bg);
      --c: var(--vz-c-font);
      --hov-bgc:var(--vz-c-border);
    ">
      Cancel
    </button>
    <button
      type="button" 
      data-varz 
      data-vz-deactivate="selector" 
      data-vz-selector="#popup"
      style="
        --p: 12px 24px;
        --br: 8px;
        --bw: 0;
        --bgc: var(--vz-c-accent);
        --c: var(--vz-c-white);
        --hov-bgc:var(--vz-c-accent2);
      ">
        OK
    </button>
  </div>
</div>
Off Canvas Heading

This is a modal content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut consequuntur deleniti doloremque et expedita, illum incidunt iure maiores nemo non numquam officia omnis reiciendis repudiandae soluta tenetur, ullam voluptates? Velit.

<button 
  type="button"
  style="
  --p: 20px 30px;
  --bg: var(--vz-c-accent);
  --c: var(--vz-c-white);
  --bw: 0;
  --br: 8px;
  --hov-bgc: var(--vz-c-accent2);
  "
  data-varz
  data-vz-activate="selector"
  data-vz-selector="#offcanvas"
  data-vz-deactivate-on="esc,click">
    Activate off-canvas
</button>
<!--offcanvas element - background-->
<div
  id="offcanvas"
  style="
  --d: flex;
  --jc:end;
  --pos:fixed;
  --t: 0;
  --r: 0;
  --b: 0;
  --l: 0;
  --z: -1;
  --v: hidden;
  --o: 0;
  --vz-z: 2;
  --vz-o: 1;
  --vz-v: visible;
">
<!--  overlay -->
  <button 
  type="button"
  style="
  --bw: 0;
  --bfil: blur(10px);
  --pos: fixed;
  --t: 0;
  --r: 0;
  --b: 0;
  --l: 0;
  --z: -1;
  --v: hidden;
  --o: 0;
  --bg: rgba(0,0,0,.6);
  --p-vz-z: 2;
  --p-vz-o: 1;
  --p-vz-v: visible;
  "
  data-varz
  data-vz-deactivate="selector"
  data-vz-selector="#offcanvas">
  </button>
  <!--  offcanvas window-->
  <div 
    style="
    --maw: 500px;
    --h:100vh;
    --d:flex;
    --fld: column;
    --bgc: var(--vz-c-light);
    --pos: relative;
    --z: 3;
    --tr:all .3s ease-in-out;
    --tf:translateX(100%);
    --o:0;
    --p-vz-tf:translateX(0);
    --p-vz-o:1;
  ">
  <!-- offcanvas heading with the close button-->
  <h5 style="
    --fls: 0;
    --m: 0;
    --p: 8px 0 8px 16px;
    --d: flex;
    --ai: center;
    --jc: space-between;
    --bc: var(--vz-c-border);
    --bw: 0 0 1px 0;
    --bs: dotted;
    ">
      Off Canvas Heading
    <button 
      type="button"
      style="
      --bg: transparent;
      --bw: 0;
      --br: 50%;
      --c: var(--vz-c-dark);
      --w: 50px;
      --h: 50px;
      --m: 0 8px 0 0;
      --d: flex;
      --ai: center;
      --jc: center;
      --hov-bgc: var(--vz-c-bg);
      "
      data-varz
      data-vz-deactivate="selector"
      data-vz-selector="#offcanvas"
    >
        <svg style="" xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 -960 960 960" width="40"><path d="m252.615-217.232-35.383-35.383L444.616-480 217.232-707.385l35.383-35.383L480-515.384l227.385-227.384 35.383 35.383L515.384-480l227.384 227.385-35.383 35.383L480-444.616 252.615-217.232Z"></path></svg>
    </button>
  </h5>
  <!-- offcanvas content-->
  <div
    style="
    --oy: auto;
    --p:16px;
  ">
    <h4>This is a modal content</h4>
    <p style="--m: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  <!-- offcanvas footer-->
  <div
    style="
    --fls: 0;
    --bs: solid;
    --bc: var(--vz-c-border);
    --bw: 1px 0 0 0;
    --d: flex;
    --p: 16px;
    --g: 16px;
    --jc: flex-end;
    --mbs: auto;
    ">
      <button 
        type="button"
        data-varz
        data-vz-deactivate="selector"
        data-vz-selector="#offcanvas" style="
        --p: 12px 24px;
        --br: 8px;
        --bw: 0;
        --bgc: var(--vz-c-bg);
        --c: var(--vz-c-font);
        --hov-bgc:var(--vz-c-border);
        ">
          Cancel
      </button>
      <button 
        type="button"
        data-varz
        data-vz-deactivate="selector"
        data-vz-selector="#offcanvas"
        style="
        --p: 12px 24px;
        --br: 8px;
        --bw: 0;
        --bgc: var(--vz-c-accent);
        --c: var(--vz-c-white);
        --hov-bgc:var(--vz-c-accent2);
      ">
         OK
      </button>
    </div>
  </div>
</div>

Form elements Table Of Contents ⤴

Default input with inline label:
<label 
  style="
    --d:inline-block;"
  >
  <span style="
    --mie: .5em;
  ">
    Your Name:
  </span>
  <input type="text" name="name" placeholder="Your Name"
    style="
    --h: 40px;
    --p: .25em .5em;
    --bor: 2px solid var(--vz-c-border);
    --br: 4px;
    --bg: var(--vz-c-bg);
    --ol:none;
    --foc-bc: var(--vz-c-dark);
  "
  >
</label>
Default input with top label:
<label style="--mbe: 2em;--d:inline-block;">
  <span>Your Name:</span>
  <br>
  <input type="text" name="name" placeholder="Your Name"
    style="
    --h: 40px;
    --p: .25em .5em;
    --bor: 2px solid var(--vz-c-border);
    --br: 4px;
    --bg: var(--vz-c-bg);
    --ol:none;
    --foc-bc: var(--vz-c-dark);
    ">
</label>
Text input with floating label on focus state (placeholder with space as value is required):
<label style="
  --pos: relative;
  --d: inline-block;
  ">
    <input type="text" name="name" placeholder=" "
    style="
    --h: 40px;
    --p: .25em .5em;
    --bor: 2px solid var(--vz-c-border);
    --br: 4px;
    --bg: var(--vz-c-bg);
    --ol:none;
    --foc-bc: var(--vz-c-dark);
    ">
    <span style="
    --pos: absolute;
    --p: 0 .15em;
    --l: .5em;
    --t: 50%;
    --lh: 1;
    --tr: all .15s ease-out;
    --tf: translateY(-50%);
    --p-fwi-t: 0;
    --p-fwi-bgc: var(--vz-c-light);
    --p-fwi-tf:  translateY(-50%) translateX(-.5em) scale(0.8);
    --s-nps-t: 0;
    --s-nps-bgc: var(--vz-c-light);
    --s-nps-tf:  translate(-.5em, -50%) scale(0.8);
    ">Your Name</span>
  </label>
Password input with floating label on focus state:
<label style="
  --pos: relative;
  --d: inline-flex;
  --ai:center;
  --mbe:1em;
  ">
  <input 
    type="password" 
    name="name"
    placeholder=" "
    style="
    --h: 40px;
    --p: .25em .5em;
    --bor: 2px solid var(--vz-c-border);
    --bw: 2px 0 2px 2px;
    --br: 4px 0 0 4px;
    --bg: var(--vz-c-bg);
    --ol:none;
    --foc-bc: var(--vz-c-dark);
    ">
    <button 
      type="button"
      data-varz 
      data-vz-toggle="self" 
      style="
        --tr:none;
        --bor: 2px solid var(--vz-c-border);
        --bw: 2px 2px 2px 0;
        --br: 0 4px 4px 0;
        --h:40px;
        --p: 0 .5em;
        --bg:transparent;
        --d:flex;
        --ai:center;
        --jc:center;
        --s-foc-bc:var(--vz-c-dark);
      "
      onclick="
        const input = this.previousElementSibling;
        if (input && input.tagName === 'INPUT') {
          input.type = input.type === 'password' ? 'text' : 'password';
        }
      ">
      <span style="--d:none;--p-vz-d:inline-flex;">
        <svg style="--w:24px" xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px"><path d="m634-422-48.67-48.67q20.34-63-27-108-47.33-45-107.66-26.66L402-654q17-10 36.83-14.67 19.84-4.66 41.17-4.66 72.33 0 122.83 50.5T653.33-500q0 21.33-5 41.5T634-422Zm128.67 128-46-45.33Q762-373 796.17-414.17q34.16-41.16 52.5-85.83-50-107.67-147.84-170.5-97.83-62.83-214.16-62.83-37.67 0-76.34 6.66Q371.67-720 346-710l-51.33-52q37-16.33 87.66-27.17Q433-800 483.33-800q145.67 0 264 82.17Q865.67-635.67 920-500q-25 62.33-64.83 114.5-39.84 52.17-92.5 91.5ZM808-61.33 640-226.67q-35 13-76.17 19.84Q522.67-200 480-200q-147.67 0-266.33-82.17Q95-364.33 40-500q20.33-52.33 54.67-100.5 34.33-48.17 82-90.17L56-812l46.67-47.33 750 750-44.67 48ZM222.67-644q-34.34 26.67-65.34 66.33-31 39.67-46.66 77.67 50.66 107.67 150.16 170.5t224.5 62.83q28.67 0 56.34-3.5 27.66-3.5 45-9.83L532-335.33q-11 4.33-25 6.5-14 2.16-27 2.16-71.67 0-122.5-50.16Q306.67-427 306.67-500q0-13.67 2.16-27 2.17-13.33 6.5-25l-92.66-92Zm309.66 125.67Zm-127.66 63.66Z"></path></svg>
      </span>
      <span style="--d:inline-flex;--p-vz-d:none;">
        <svg style="--w:24px;" xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px"><path d="M602.83-377.17q50.5-50.5 50.5-122.83t-50.5-122.83q-50.5-50.5-122.83-50.5t-122.83 50.5q-50.5 50.5-50.5 122.83t50.5 122.83q50.5 50.5 122.83 50.5t122.83-50.5ZM401.5-421.5q-32.17-32.17-32.17-78.5t32.17-78.5q32.17-32.17 78.5-32.17t78.5 32.17q32.17 32.17 32.17 78.5t-32.17 78.5q-32.17 32.17-78.5 32.17t-78.5-32.17Zm-186.17 139Q96.67-365 40-500q56.67-135 175.33-217.5Q334-800 480-800t264.67 82.5Q863.33-635 920-500q-56.67 135-175.33 217.5Q626-200 480-200t-264.67-82.5ZM480-500Zm217.5 169.83q99.17-63.5 151.17-169.83-52-106.33-151.17-169.83-99.17-63.5-217.5-63.5t-217.5 63.5Q163.33-606.33 110.67-500q52.66 106.33 151.83 169.83 99.17 63.5 217.5 63.5t217.5-63.5Z"></path></svg>
      </span>
    </button>
    <span style="
      --pos: absolute;
      --p: 0 .15em;
      --l: .5em;
      --t: 50%;
      --lh: 1;
      --tr: all .15s ease-out;
      --tf: translateY(-50%);
      --p-fwi-t: 0;
      --p-fwi-bgc: var(--vz-c-light);
      --p-fwi-tf:  translate(-.5em, -50%) scale(0.8);
      --s-nps-t: 0;
      --s-nps-bgc: var(--vz-c-light);
      --s-nps-tf:  translate(-.5em, -50%) scale(0.8);
    ">
      Your Password
    </span>
  </label>
Regular checkbox
<label style="
  --d:inline-flex;
  --cg:.5em;
  --ai:center;
  ">
    <input type="checkbox" name="checkbox1">
    <span>This is the checkbox</span>
</label>
Styled checkbox
<label style="
  --pos:relative;
  --d:inline-flex;
  --mbe:1em;
  --pis:12px;
  --cg:4px;
  --ai:center;
  ">
    <input
      type="checkbox"
      name="checkbox1"
      style="
        --o:0;
    ">
    <span>This is the checkbox</span>
    <!--border-->
    <span style="
      --pos:absolute;
      --w:20px;
      --h:20px;
      --l:0;
      --t:50%;
      --tr:all .1s ease-in-out;
      --tf:translate(0, -50%);
      --bor: 2px solid var(--vz-c-border);
      --br: 4px;
      --s-foc-ol: 2px solid var(--vz-c-accent2);
      --s-ch-bc: var(--vz-c-accent);
    "></span>
    <!--checkbox-->
    <span style="
      --pos:absolute;
      --w:24px;
      --h:24px;
      --l:-1px;
      --t:50%;
      --tr:all .2s ease-in-out;
      --tf:translate(0, -50%) scale(0);
      --s-ch-bc: var(--vz-c-accent);
      --s-ch-tf:translate(0, -50%) scale(1);
    ">
      <svg style="--w:24px;--h:24px;--c:var(--vz-c-accent);" xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px"><path d="m379.33-339.33 355-355q10.19-10 23.76-10 13.58 0 23.58 10.03 10 10.04 10 23.83 0 13.8-10 23.8l-379 379.34q-10 10-23.34 10-13.33 0-23.33-10L177.33-446q-10-10.04-9.5-23.86.5-13.81 10.54-23.81 10.03-10 23.83-10 13.8 0 23.8 10l153.33 154.34Z"></path></svg>
    </span>
</label>
Styled checkbox - variant 2
<label style="
  --pos:relative;
  --d:inline-flex;
  --mbe:2em;
  --pis:42px;
  --cg:4px;
  --ai:center;
  ">
    <input 
      type="checkbox"
      name="checkbox2"
      style="
        --o:0;
    ">
    <span>This is the checkbox</span>
    <!--border-->
    <span style="
      --pos:absolute;
      --w:48px;
      --h:28px;
      --l:0;
      --t:50%;
      --tr:all .1s ease-in-out;
      --tf:translate(0, -50%);
      --bor: 2px solid var(--vz-c-border);
      --br: 99px;
      --s-foc-ol: 2px solid var(--vz-c-accent2);
      --s-ch-bc: var(--vz-c-accent);
    "></span>
    <!--round-->
    <span style="
      --pos:absolute;
      --w:20px;
      --h:20px;
      --l:-1px;
      --t:50%;
      --br:50%;
      --bgc: var(--vz-c-border);
      --tr:all .2s ease-in-out;
      --tf:translate(5px, -50%);
      --s-ch-bgc: var(--vz-c-accent);
      --s-ch-tf:translate(24px, -50%);
    "></span>
</label>
Styled checkbox - variant 3
<label style="
  --pos:relative;
  --d:inline-flex;
  --pis:42px;
  --cg:4px;
  --ai:center;
">
  <input type="checkbox" name="checkbox3" style="
    --o:0;
  ">
  <span>This is the checkbox</span>
  <!--border-->
  <span style="
    --pos:absolute;
    --w:48px;
    --h:28px;
    --l:0;
    --t:50%;
    --tr:all .1s ease-in-out;
    --tf:translate(0, -50%);
    --bor: 2px solid var(--vz-c-border);
    --bgc: var(--vz-c-border);
    --br: 99px;
    --o: .4;
    --s-foc-ol: 2px solid var(--vz-c-accent2);
    --s-ch-bc: var(--vz-c-accent2);
    --s-ch-bgc: var(--vz-c-accent2);
    --s-ch-o: .6;
  "></span>
  <!--round-->
  <span style="
    --pos:absolute;
    --w:20px;
    --h:20px;
    --l:-1px;
    --t:50%;
    --br:50%;
    --bgc: var(--vz-c-border);
    --tr:all .2s ease-in-out;
    --tf:translate(5px, -50%);
    --s-ch-bgc: var(--vz-c-accent);
    --s-ch-tf:translate(24px, -50%);
  "></span>
</label>

Simple radio buttons
<label style="--d:inline-flex; --ai:center;--g:8px;">
  <input type="radio" name="radio1" value="radio-1-1" checked>
  <span>Radio 1</span>
</label>
<label style="--d:inline-flex; --ai:center;--g:8px;">
  <input type="radio" name="radio1" value="radio-1-2">
  <span>Radio 2</span>
</label>
Styled radio buttons
<label style="
  --pos:relative;
  --d:inline-flex;
  --mbe:2em;
  --mie:2em;
  --pis:12px;
  --cg:4px;
  --ai:center;
  ">
    <input type="radio" name="radio-2" value="radio-2-1" checked style="
      --o:0;
    ">
    <span>This is the radio 2-1</span>
    <!--border-->
    <span style="
      --pos:absolute;
      --w:20px;
      --h:20px;
      --l:0;
      --t:50%;
      --tr:all .1s ease-in-out;
      --tf:translate(0, -50%);
      --bor: 2px solid var(--vz-c-border);
      --br: 50%;
      --s-foc-ol: 2px solid var(--vz-c-accent2);
      --s-ch-bc: var(--vz-c-accent);
    "></span>
    <!--round-->
    <span style="
      --pos:absolute;
      --bgc: var(--vz-c-accent);
      --br: 50%;
      --w:12px;
      --h:12px;
      --l:4px;
      --t:50%;
      --tr:all .2s ease-in-out;
      --tf:translate(0, -50%) scale(0);
      --s-ch-bc: var(--vz-c-accent);
      --s-ch-tf:translate(0, -50%) scale(1);
    "></span>
  </label>

  <label style="
  --pos:relative;
  --d:inline-flex;
  --mbe:2em;
  --pis:12px;
  --cg:4px;
  --ai:center;
  ">
    <input type="radio" name="radio-2" value="radio-2-2" style="
      --o:0;
    ">
    <span>This is the radio 2-2</span>
    <!--border-->
    <span style="
      --pos:absolute;
      --w:20px;
      --h:20px;
      --l:0;
      --t:50%;
      --tr:all .1s ease-in-out;
      --tf:translate(0, -50%);
      --bor: 2px solid var(--vz-c-border);
      --br: 50%;
      --s-foc-ol: 2px solid var(--vz-c-accent2);
      --s-ch-bc: var(--vz-c-accent);
    "></span>
    <!--round-->
    <span style="
      --pos:absolute;
      --bgc: var(--vz-c-accent);
      --br: 50%;
      --w:12px;
      --h:12px;
      --l:4px;
      --t:50%;
      --tr:all .2s ease-in-out;
      --tf:translate(0, -50%) scale(0);
      --s-ch-bc: var(--vz-c-accent);
      --s-ch-tf:translate(0, -50%) scale(1);
    "></span>
</label>
Input type radio based button group
<div style="
  --d:inline-flex;
  --d-s:flex;
  --fld-s:column;
  --br:8px;
  --of:hidden;
">
  <label style="--pos:relative;">
    <input type="radio" name="btn-group1" value="1" checked
      style="--pos:absolute;--o:0;"
    >
    <span style="--c:var(--vz-c-white);--bgc:var(--vz-c-accent2);--s-ch-bgc:var(--vz-c-accent);--lh:1;--d:flex;--p:1em 1.5em;--tr:all .2s ease">Value 1</span>
  </label>
  <label style="--pos:relative;">
    <input type="radio" name="btn-group1" value="2"
      style="--pos:absolute;--o:0;"
    >
    <span style="--c:var(--vz-c-white);--bgc:var(--vz-c-accent2);--s-ch-bgc:var(--vz-c-accent);--lh:1;--d:flex;--p:1em 1.5em;--tr:all .2s ease">Value 2</span>
  </label>
  <label style="--pos:relative;">
    <input type="radio" name="btn-group1" value="3"
      style="--pos:absolute;--o:0;"
    >
    <span style="--c:var(--vz-c-white);--bgc:var(--vz-c-accent2);--s-ch-bgc:var(--vz-c-accent);--lh:1;--d:flex;--p:1em 1.5em;--tr:all .2s ease">Value 3</span>
  </label>
</div>

Tooltips Table Of Contents ⤴

This is the help text This is on-hover help popup tooltip (right) 
<h5 style="
--d:flex;
--ai:center;
--g:12px;
--mbs:40px;
"> 
  <span style="
    --pos:relative;
    --cur:help;
  ">
    <svg style="width: 24px;--cur:pointer;" xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px"><path d="M511.83-256.83Q524-269 524-286.67q0-17.66-12.17-29.83-12.16-12.17-29.83-12.17-17.67 0-29.83 12.17Q440-304.33 440-286.67q0 17.67 12.17 29.84 12.16 12.16 29.83 12.16 17.67 0 29.83-12.16Zm-65.16-136.5h64q0-28.34 6.83-49 6.83-20.67 41.17-50.34 29.33-26 43-50.5 13.66-24.5 13.66-55.5 0-54-36.66-85.33-36.67-31.33-93.34-31.33-51.66 0-88.5 26.33Q360-662.67 344-620l57.33 22q9-24.67 29.5-42t52.5-17.33q33.34 0 52.67 18.16 19.33 18.17 19.33 44.5 0 21.34-12.66 40.17-12.67 18.83-35.34 37.83-34.66 30.34-47.66 54-13 23.67-13 69.34ZM480-80q-82.33 0-155.33-31.5-73-31.5-127.34-85.83Q143-251.67 111.5-324.67T80-480q0-83 31.5-156t85.83-127q54.34-54 127.34-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82.33-31.5 155.33-31.5 73-85.5 127.34Q709-143 636-111.5T480-80Zm0-66.67q139.33 0 236.33-97.33t97-236q0-139.33-97-236.33t-236.33-97q-138.67 0-236 97-97.33 97-97.33 236.33 0 138.67 97.33 236 97.33 97.33 236 97.33ZM480-480Z"></path></svg>
    <span style="
      --o:0;
      --pos:absolute;
      --miw:12em;
      --pe:none;
      --fs:14px;
      --fst:italic;
      --bor:1px solid var(--vz-c-border);
      --br:8px;
      --bgc:var(--vz-c-bg);
      --p:1em;
      --l:28px;
      --t:50%;
      --tf:translateY(-50%);
      --tr:all .25s ease;
      --p-hov-o:1;
      --p-hov-l:32px;
    ">
      This is the help text
      <!--tooltip corner--> 
      <span style="
        --pos:absolute;
        --bor:1px solid var(--vz-c-border);
        --bw:0 0 1px 1px;
        --bgc:var(--vz-c-bg);
        --w:12px;
        --h:12px;
        --l:-6px;
        --t:50%;
        --tf:translateY(-50%) rotate(45deg);
      "></span>
    </span>
  </span>
  This is on-hover help popup tooltip (right)
</h5>
This is on-hover help popup tooltip (left) This is the help text with a very long full description 
<h5
  style="
  --d:flex;
  --ai:center;
  --g:12px;
  --mbs:40px;
">
  This is on-hover help popup tooltip (left)
  <span style="--pos:relative;--cur:help;">
    <IconHelp style="width: 24px;--cur:pointer;"/>
    <span style="
    --o:0;
    --pos:absolute;
    --miw:12em;
    --pe:none;
    --fs:14px;
    --fst:italic;
    --bor:1px solid var(--vz-c-border);
    --br:8px;
    --bgc:var(--vz-c-bg);
    --p:1em;
    --r:28px;
    --t:50%;
    --tf:translateY(-50%);
    --tr:all .25s ease;
    --p-hov-o:1;
    --p-hov-r:32px;
    ">
      This is the help text with a very long full description
      <!--tooltip corner-->
      <span style="
        --pos:absolute;
        --bor:1px solid var(--vz-c-border);
        --bw:1px 1px 0 0;
        --bgc:var(--vz-c-bg);
        --w:12px;
        --h:12px;
        --r:-6px;
        --t:50%;
        --tf:translateY(-50%) rotate(45deg);
      "></span>
    </span>
  </span>
</h5>
This is the help text This is on-hover help popup tooltip (top left) 
<h5 style="
  --d:flex;
  --ai:center;
  --g:12px;
  --mbs:40px;"
>
  <span style="--pos:relative;--cur:help;">
    <svg style="width: 24px;--cur:pointer;" xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px"><path d="M511.83-256.83Q524-269 524-286.67q0-17.66-12.17-29.83-12.16-12.17-29.83-12.17-17.67 0-29.83 12.17Q440-304.33 440-286.67q0 17.67 12.17 29.84 12.16 12.16 29.83 12.16 17.67 0 29.83-12.16Zm-65.16-136.5h64q0-28.34 6.83-49 6.83-20.67 41.17-50.34 29.33-26 43-50.5 13.66-24.5 13.66-55.5 0-54-36.66-85.33-36.67-31.33-93.34-31.33-51.66 0-88.5 26.33Q360-662.67 344-620l57.33 22q9-24.67 29.5-42t52.5-17.33q33.34 0 52.67 18.16 19.33 18.17 19.33 44.5 0 21.34-12.66 40.17-12.67 18.83-35.34 37.83-34.66 30.34-47.66 54-13 23.67-13 69.34ZM480-80q-82.33 0-155.33-31.5-73-31.5-127.34-85.83Q143-251.67 111.5-324.67T80-480q0-83 31.5-156t85.83-127q54.34-54 127.34-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82.33-31.5 155.33-31.5 73-85.5 127.34Q709-143 636-111.5T480-80Zm0-66.67q139.33 0 236.33-97.33t97-236q0-139.33-97-236.33t-236.33-97q-138.67 0-236 97-97.33 97-97.33 236.33 0 138.67 97.33 236 97.33 97.33 236 97.33ZM480-480Z"></path></svg>
    <span style="
    --o:0;
    --pos:absolute;
    --miw:12em;
    --pe:none;
    --fs:14px;
    --fst:italic;
    --bor:1px solid var(--vz-c-border);
    --br:8px;
    --bgc:var(--vz-c-bg);
    --p:1em;
    --l:-8px;
    --t:-95%;
    --tr:all .25s ease;
    --p-hov-o:1;
    --p-hov-t:-100%;
    ">
        This is the help text
        <!--tooltip corner-->
        <span style="
        --pos:absolute;
        --bor:1px solid var(--vz-c-border);
        --bw:0 1px 1px 0;
        --bgc:var(--vz-c-bg);
        --w:12px;
        --h:12px;
        --l:14px;
        --b:0;
        --tf:translateY(50%) rotate(45deg);
        "></span>
    </span>
  </span>
  This is on-hover help popup tooltip (top left)
</h5>
This is on-hover help popup tooltip (top right) This is the help text 
<h5 style="
  --d:flex;
  --ai:center;
  --g:12px;
  --mbs:40px;"
>
    This is on-hover help popup tooltip (top right)
  <span style="--pos:relative;--cur:help;">
    <svg style="width: 24px;--cur:pointer;" xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px"><path d="M511.83-256.83Q524-269 524-286.67q0-17.66-12.17-29.83-12.16-12.17-29.83-12.17-17.67 0-29.83 12.17Q440-304.33 440-286.67q0 17.67 12.17 29.84 12.16 12.16 29.83 12.16 17.67 0 29.83-12.16Zm-65.16-136.5h64q0-28.34 6.83-49 6.83-20.67 41.17-50.34 29.33-26 43-50.5 13.66-24.5 13.66-55.5 0-54-36.66-85.33-36.67-31.33-93.34-31.33-51.66 0-88.5 26.33Q360-662.67 344-620l57.33 22q9-24.67 29.5-42t52.5-17.33q33.34 0 52.67 18.16 19.33 18.17 19.33 44.5 0 21.34-12.66 40.17-12.67 18.83-35.34 37.83-34.66 30.34-47.66 54-13 23.67-13 69.34ZM480-80q-82.33 0-155.33-31.5-73-31.5-127.34-85.83Q143-251.67 111.5-324.67T80-480q0-83 31.5-156t85.83-127q54.34-54 127.34-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82.33-31.5 155.33-31.5 73-85.5 127.34Q709-143 636-111.5T480-80Zm0-66.67q139.33 0 236.33-97.33t97-236q0-139.33-97-236.33t-236.33-97q-138.67 0-236 97-97.33 97-97.33 236.33 0 138.67 97.33 236 97.33 97.33 236 97.33ZM480-480Z"></path></svg>
    <span style="
      --o:0;
      --pos:absolute;
      --miw:12em;
      --pe:none;
      --fs:14px;
      --fst:italic;
      --bor:1px solid var(--vz-c-border);
      --br:8px;
      --bgc:var(--vz-c-bg);
      --p:1em;
      --r:-8px;
      --t:-95%;
      --tr:all .25s ease;
      --p-hov-o:1;
      --p-hov-t:-100%;
      ">
        This is the help text
        <!--tooltip corner-->
        <span style="
        --pos:absolute;
        --bor:1px solid var(--vz-c-border);
        --bw:0 1px 1px 0;
        --bgc:var(--vz-c-bg);
        --w:12px;
        --h:12px;
        --r:14px;
        --b:0;
        --tf:translateY(50%) rotate(45deg);
        "></span>
      </span>
  </span>
</h5>
This is the help text This is on click help popup tooltip (right) - click question sign to activate 
<h5 style="--d:flex;--ai:center;--g:12px;--mbs:40px;">
  <span style="--pos:relative;--cur:help;"
    data-varz
    data-vz-activate="self"
    data-vz-deactivate-on="click,esc"
  >
    <svg style="width: 24px;--cur:pointer;" xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px"><path d="M511.83-256.83Q524-269 524-286.67q0-17.66-12.17-29.83-12.16-12.17-29.83-12.17-17.67 0-29.83 12.17Q440-304.33 440-286.67q0 17.67 12.17 29.84 12.16 12.16 29.83 12.16 17.67 0 29.83-12.16Zm-65.16-136.5h64q0-28.34 6.83-49 6.83-20.67 41.17-50.34 29.33-26 43-50.5 13.66-24.5 13.66-55.5 0-54-36.66-85.33-36.67-31.33-93.34-31.33-51.66 0-88.5 26.33Q360-662.67 344-620l57.33 22q9-24.67 29.5-42t52.5-17.33q33.34 0 52.67 18.16 19.33 18.17 19.33 44.5 0 21.34-12.66 40.17-12.67 18.83-35.34 37.83-34.66 30.34-47.66 54-13 23.67-13 69.34ZM480-80q-82.33 0-155.33-31.5-73-31.5-127.34-85.83Q143-251.67 111.5-324.67T80-480q0-83 31.5-156t85.83-127q54.34-54 127.34-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82.33-31.5 155.33-31.5 73-85.5 127.34Q709-143 636-111.5T480-80Zm0-66.67q139.33 0 236.33-97.33t97-236q0-139.33-97-236.33t-236.33-97q-138.67 0-236 97-97.33 97-97.33 236.33 0 138.67 97.33 236 97.33 97.33 236 97.33ZM480-480Z"></path></svg>
    <span style="
      --o:0;
      --pos:absolute;
      --miw:12em;
      --pe:none;
      --fs:14px;
      --fst:italic;
      --bor:1px solid var(--vz-c-border);
      --br:8px;
      --bgc:var(--vz-c-bg);
      --p:1em;
      --l:28px;
      --t:50%;
      --tf:translateY(-50%);
      --tr:all .25s ease;
      --p-vz-o:1;
      --p-vz-l:32px;
    ">
      This is the help text
      <!--tooltip corner-->
      <span style="
      --pos:absolute;
      --bor:1px solid var(--vz-c-border);
      --bw:0 0 1px 1px;
      --bgc:var(--vz-c-bg);
      --w:12px;
      --h:12px;
      --l:-6px;
      --t:50%;
      --tf:translateY(-50%) rotate(45deg);
      "></span>
    </span>
  </span>
    This is on click help popup tooltip (right) - click question sign to activate
</h5>

Tabs Table Of Contents ⤴

Unstyled tabs

This is TAB 1 content.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum deserunt dolor expedita incidunt ipsum porro ratione sit soluta unde voluptas? Amet dignissimos eius est inventore iusto neque optio tempore voluptatem.

This is TAB 2 content.

Architecto earum laudantium nesciunt rerum. Beatae consequatur facere iste magnam perspiciatis, placeat porro qui quod rerum temporibus tenetur, velit veniam voluptatem voluptatibus. Consectetur adipisicing elit. 

<nav>
  <ul
    style="
      --d: flex;
      --flw: wrap;
      --p: 0;
      --m: 0 0 24px;
      --g: 16px;
    ">
    <li
      class="vz"
      style="--d:inline-block;"
      data-varz
      data-vz-selector="#tab_1"
      data-vz-activate="self,selector"
      data-vz-deactivate="siblings,selectorSiblings"
    >
      <a
        style="
        --td: none;
        --bgc: var(--vz-c-bg);
        --c: var(--vz-c-font);
        --p-vz-c: var(--vz-c-white);
        --p-vz-bgc: var(--vz-c-accent);
        --p: 16px 32px;
        --br: 16px;
      "
        href="#;">
        Tab 1
      </a>
    </li>
    <li
      style="--d:inline-block;"
      data-varz
      data-vz-selector="#tab_2"
      data-vz-activate="self,selector"
      data-vz-deactivate="siblings,selectorSiblings"
    >
      <a
        style="
        --td: none;
        --bgc: var(--vz-c-bg);
        --c: var(--vz-c-font);
        --p-vz-c: var(--vz-c-white);
        --p-vz-bgc: var(--vz-c-accent);
        --p: 16px 32px;
        --br: 16px;
        "
        href="#;">
        Tab 2
      </a>
    </li>
  </ul>
</nav>
<div style="--m: 0 0 32px 0;">
  <div
    id="tab_1"
    class="vz"
    style="
    --d:none;
    --vz-d:block;
    ">
    <h6>This is <strong>TAB 1</strong> content.</h6>
    <p style="--m:0;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum deserunt dolor expedita incidunt ipsum porro
      ratione sit soluta unde voluptas? Amet dignissimos eius est inventore iusto neque optio tempore voluptatem.
    </p>
  </div>
  <div id="tab_2" style="--d:none;--vz-d:block;">
    <h6>This is <strong>TAB 2</strong> content.</h6>
    <p style="--m:0;">
      Architecto earum laudantium nesciunt rerum. Beatae consequatur facere iste magnam perspiciatis, placeat porro
      qui quod rerum temporibus tenetur, velit veniam voluptatem voluptatibus. Consectetur adipisicing elit.
    </p>
  </div>
</div>

Bordered tabs

This is TAB 3 content.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum deserunt dolor expedita incidunt ipsum porro ratione sit soluta unde voluptas? Amet dignissimos eius est inventore iusto neque optio tempore voluptatem.

This is TAB 4 content.

Architecto earum laudantium nesciunt rerum. Beatae consequatur facere iste magnam perspiciatis, placeat porro qui quod rerum temporibus tenetur, velit veniam voluptatem voluptatibus. Consectetur adipisicing elit. 

<nav
  style="
    --d: flex;
    --flw: wrap;
    --p: 0;
    --gap: 16px;
    --m: 0 0 -1px 0;
  "
>
  <a
    class="vz"
    data-varz
    data-vz-selector="#tab_3"
    data-vz-activate="self,selector"
    data-vz-deactivate="siblings,selectorSiblings"
    style="
      --c: var(--vz-c-accent);
      --p: 12px 24px;
      --vz-bgc: var(--vz-c-bg);
      --bc: var(--vz-c-border);
      --bs: solid;
      --bw: 1px 1px 0 1px;
      --hov-td:none;
    "
    href="#;"
  >
    Tab 3
  </a>
  <a
    data-varz
    data-vz-selector="#tab_4"
    data-vz-activate="self,selector"
    data-vz-deactivate="siblings,selectorSiblings"
    style="
      --m: 0 0 0 -1px;
      --c: var(--vz-c-accent);
      --p: 12px 24px;
      --vz-bgc: var(--vz-c-bg);
      --bc: var(--vz-c-border);
      --bs: solid;
      --bw: 1px 1px 0 1px;
      --hov-td:none;
    "
    href="#;"
    >
      Tab 4
  </a>
</nav>
<div
  style="
    --m: 0 0 32px 0;
    --p: 30px;
    --bg: var(--vz-c-bg);
    --bc: var(--vz-c-border);
    --bs: solid;
    --bw: 1px;"
  >
  <div id="tab_3" class="vz" style="--d:none;--vz-d:block;">
    <h6>This is <strong>TAB 3</strong> content.</h6>
    <p style="--m:0;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum deserunt dolor expedita incidunt ipsum porro
      ratione sit soluta unde voluptas? Amet dignissimos eius est inventore iusto neque optio tempore voluptatem.
    </p>
  </div>
  <div id="tab_4" style="--d:none;--vz-d:block;">
    <h6>This is <strong>TAB 4</strong> content.</h6>
    <p style="--m:0;">
      Architecto earum laudantium nesciunt rerum. Beatae consequatur facere iste magnam perspiciatis, placeat porro
      qui quod rerum temporibus tenetur, velit veniam voluptatem voluptatibus. Consectetur adipisicing elit.
    </p>
  </div>
</div>

Modern tabs

This is TAB 5 content.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum deserunt dolor expedita incidunt ipsum porro ratione sit soluta unde voluptas? Amet dignissimos eius est inventore iusto neque optio tempore voluptatem.

This is TAB 6 content.

Architecto earum laudantium nesciunt rerum. Beatae consequatur facere iste magnam perspiciatis, placeat porro qui quod rerum temporibus tenetur, velit veniam voluptatem voluptatibus. Consectetur adipisicing elit. 

<nav
  style="
    --d: flex;
    --flw: wrap;
    --jc: center;
    --p: 0;
    --gap: 16px;
    --bs: solid;
    --bw: 0 0 1px 0;
    --bc: var(--vz-c-border);
    "
  >
  <a
    class="vz"
    data-varz
    data-vz-selector="#tab_5"
    data-vz-activate="self,selector"
    data-vz-deactivate="siblings,selectorSiblings"
    style="
      --td: none;
      --c: var(--vz-c-font);
      --m: 0 0 -2px 0;
      --p: 12px 32px;
      --bs: solid;
      --bw: 0 0 3px 0;
      --bc: transparent;
      --vz-bc: var(--vz-c-accent);
    "
    href="#;"
  >
    Tab 5
  </a>
  <a
    data-varz
    data-vz-selector="#tab_6"
    data-vz-activate="self,selector"
    data-vz-deactivate="siblings,selectorSiblings"
    style="
      --td: none;
      --c: var(--vz-c-font);
      --m: 0 0 -2px 0;
      --p: 12px 32px;
      --bs: solid;
      --bw: 0 0 3px 0;
      --bc: transparent;
      --vz-bc: var(--vz-c-accent);
    "
    href="#;"
  >
    Tab 6
  </a>
</nav>
<div
  style="
    --m: 0 0 32px 0;
    --p: 24px 0 0 0;
  "
>
  <div id="tab_5" class="vz" style="--d:none;--vz-d:block;">
    <h6>This is <strong>TAB 5</strong> content.</h6>
    <p style="--m:0;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum deserunt dolor expedita incidunt ipsum porro
      ratione sit soluta unde voluptas? Amet dignissimos eius est inventore iusto neque optio tempore voluptatem.
    </p>
  </div>
  <div id="tab_6" style="--d:none;--vz-d:block;">
    <h6>This is <strong>TAB 6</strong> content.</h6>
    <p style="--m:0;">
      Architecto earum laudantium nesciunt rerum. Beatae consequatur facere iste magnam perspiciatis, placeat porro
      qui quod rerum temporibus tenetur, velit veniam voluptatem voluptatibus. Consectetur adipisicing elit.
    </p>
  </div>
</div>

Accordion Table Of Contents ⤴

Unstyled accordion

Accordion title #1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, commodi deserunt dicta ducimus id repellat sapiente unde vitae! Ad dicta dolor ex explicabo magnam magni nobis numquam ratione recusandae voluptatum!

Accordion title #2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur facere necessitatibus nihil non numquam quis tempore ullam voluptates! Adipisci architecto asperiores earum ipsam nemo, recusandae reiciendis rem. Quibusdam, tempora, voluptates.

Accordion title #3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus dignissimos facere id recusandae sit? Atque consectetur dolore dolorem, ducimus officia quis! Debitis ducimus eos fuga inventore ipsa laboriosam modi reprehenderit.

<div>
  <div class="vz">
    <h5
      data-varz
      data-vz-activate="parent"
      data-vz-deactivate="parentSiblings"
      data-vz-self-deactivation="true"
      style="
      --d:flex;
      --ai:center;
      --cur:pointer;"
      >
         Accordion title #1
        <svg style="
        --w:32px;
        --h:32px;
        --tf:rotate(90deg);
        --a-vz-tf:rotate(-90deg);"
        xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 -960 960 960" width="40"><path d="M530.565-480.41 339.796-671.436l35.794-35.794 226.563 226.82L375.59-253.847l-35.794-35.794L530.565-480.41Z"></path></svg>
    </h5>
    <div style="
      --d:none;
      --p-vz-d:block;">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, commodi deserunt dicta ducimus id repellat sapiente unde vitae! Ad dicta dolor ex explicabo magnam magni nobis numquam ratione recusandae voluptatum!</p>
    </div>
  </div>
  <div>
    <h5
      data-varz
      data-vz-activate="parent"
      data-vz-deactivate="parentSiblings"
      data-vz-self-deactivation="true"
      style="
      --d:flex;
      --ai:center;
      --cur:pointer;"
      >
      Accordion title #2
      <svg style="
      --w:32px;
      --h:32px;
      --tf:rotate(90deg);
      --a-vz-tf:rotate(-90deg);"
      xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 -960 960 960" width="40"><path d="M530.565-480.41 339.796-671.436l35.794-35.794 226.563 226.82L375.59-253.847l-35.794-35.794L530.565-480.41Z"></path></svg>
    </h5>
    <div style="
    --d:none;
    --p-vz-d:block;">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur facere necessitatibus nihil non numquam quis tempore ullam voluptates! Adipisci architecto asperiores earum ipsam nemo, recusandae reiciendis rem. Quibusdam, tempora, voluptates.</p>
    </div>
  </div>
  <div>
    <h5
      data-varz
      data-vz-activate="parent"
      data-vz-deactivate="parentSiblings"
      data-vz-self-deactivation="true"
      style="
      --d:flex;
      --ai:center;
      --cur:pointer;"
      >
      Accordion title #3
      <svg style="
      --w:32px;
      --h:32px;
      --tf:rotate(90deg);
      --a-vz-tf:rotate(-90deg);"
      xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 -960 960 960" width="40"><path d="M530.565-480.41 339.796-671.436l35.794-35.794 226.563 226.82L375.59-253.847l-35.794-35.794L530.565-480.41Z"></path></svg>
    </h5>
    <div style="
      --d:none;
      --p-vz-d:block;">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus dignissimos facere id recusandae sit? Atque consectetur dolore dolorem, ducimus officia quis! Debitis ducimus eos fuga inventore ipsa laboriosam modi reprehenderit.</p>
    </div>
  </div>
</div>

Bordered accordion

Accordion title #1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad culpa, cum error facere facilis incidunt iure minus molestias optio pariatur, perferendis quae quos repellat sunt tempora unde veritatis voluptate! Ex.

Accordion title #2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquam at doloremque ea error eveniet explicabo iusto magnam nobis officiis optio quam quis repudiandae, tempore, ut veritatis, voluptas voluptate voluptatem!

Accordion title #3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa delectus, ducimus fugiat ipsam ipsum magni maxime mollitia neque nostrum nulla, officia perspiciatis recusandae sapiente sit sunt unde vel? Eveniet, exercitationem.


<div style="
  --border-width: 1px;
  --br: 12px;
  --bc: var(--vz-c-border);
  --bs: solid;
  --bw: var(--border-width);
  --of: hidden;
">
  <div class="vz">
    <h5
      data-varz
      data-vz-activate="parent"
      data-vz-deactivate="parentSiblings"
      data-vz-self-deactivation="true"
      style="
        --d:flex;
        --ai:center;
        --jc:space-between;
        --p: 12px 24px;
        --bc: var(--vz-c-border);
        --bs: solid;
        --bw: var(--border-width) 0;
        --m: calc(0px - var(--border-width)) 0;
        --hov-c:var(--vz-c-white);
        --hov-bgc: var(--vz-c-accent2);
        --p-vz-c:var(--vz-c-white);
        --p-vz-bgc: var(--vz-c-accent);
        --cur:pointer"
      >
        Accordion title #1
        <svg style="
        --w:32px;
        --h:32px;
        --tf:rotate(90deg);
        --a-vz-tf:rotate(-90deg);
        --m:0 0 0 auto;"
        xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 -960 960 960" width="40"><path d="M530.565-480.41 339.796-671.436l35.794-35.794 226.563 226.82L375.59-253.847l-35.794-35.794L530.565-480.41Z"></path></svg>
    </h5>
    <div style="
      --d:none;
      --p-vz-d:block;
      --p: 24px;">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad culpa, cum error facere facilis incidunt iure minus molestias optio pariatur, perferendis quae quos repellat sunt tempora unde veritatis voluptate! Ex.</p>
    </div>
  </div>
  <div>
    <h5
      data-varz
      data-vz-activate="parent"
      data-vz-deactivate="parentSiblings"
      data-vz-self-deactivation="true"
      style="
        --d:flex;
        --ai:center;
        --jc:space-between;
        --p: 12px 24px;
        --bc: var(--vz-c-border);
        --bs: solid;
        --bw: var(--border-width) 0;
        --m: calc(0px - var(--border-width)) 0;
        --hov-c:var(--vz-c-white);
        --hov-bgc: var(--vz-c-accent2);
        --p-vz-c:var(--vz-c-white);
        --p-vz-bgc: var(--vz-c-accent);
        --cur:pointer"
      >
         Accordion title #2
      <svg style="
        --w:32px;
        --h:32px;
        --tf:rotate(90deg);
        --a-vz-tf:rotate(-90deg);
        --m:0 0 0 auto;"
        xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 -960 960 960" width="40"><path d="M530.565-480.41 339.796-671.436l35.794-35.794 226.563 226.82L375.59-253.847l-35.794-35.794L530.565-480.41Z"></path></svg>
    </h5>
    <div style="
      --d:none;
      --p-vz-d:block;
      --p: 24px;">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquam at doloremque ea error eveniet explicabo iusto magnam nobis officiis optio quam quis repudiandae, tempore, ut veritatis, voluptas voluptate voluptatem!</p>
    </div>
  </div>
  <div>
    <h5
      data-varz
      data-vz-activate="parent"
      data-vz-deactivate="parentSiblings"
      data-vz-self-deactivation="true"
      style="
        --d:flex;
        --ai:center;
        --jc:space-between;
        --p: 12px 24px;
        --bc: var(--vz-c-border);
        --bs: solid;
        --bw: var(--border-width) 0;
        --m: calc(0px - var(--border-width)) 0;
        --hov-c:var(--vz-c-white);
        --hov-bgc: var(--vz-c-accent2);
        --p-vz-c:var(--vz-c-white);
        --p-vz-bgc: var(--vz-c-accent);
        --cur:pointer"
      >
        Accordion title #3
      <svg style="
      --w:32px;
      --h:32px;
      --tf:rotate(90deg);
      --a-vz-tf:rotate(-90deg);
      --m:0 0 0 auto;"
      xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 -960 960 960" width="40"><path d="M530.565-480.41 339.796-671.436l35.794-35.794 226.563 226.82L375.59-253.847l-35.794-35.794L530.565-480.41Z"></path></svg>
    </h5>
    <div style="
      --d:none;
      --p-vz-d:block;
      --p: 24px;">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa delectus, ducimus fugiat ipsam ipsum magni maxime mollitia neque nostrum nulla, officia perspiciatis recusandae sapiente sit sunt unde vel? Eveniet, exercitationem.</p>
    </div>
  </div>
</div>

Modern accordion

Accordion title #1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium amet architecto dolorem expedita incidunt perspiciatis reiciendis repellendus suscipit voluptatem, voluptates. Aspernatur blanditiis deleniti et iure nam, perferendis porro voluptatibus! Voluptatum?

Accordion title #2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus minus sit ullam. Amet consequuntur corporis, eaque earum enim excepturi facere harum laudantium omnis placeat quae quia quos similique, sunt, tempore.

Accordion title #3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi cupiditate doloremque error ipsam rerum, ut? Aliquid at cumque distinctio ea, illo itaque laudantium optio quae quod, ratione, repudiandae similique sit? 

<div style="
--border-width: 2px;
--items-gap: 24px;
">
  <div class="vz">
    <h5
      data-varz
      data-vz-activate="parent"
      data-vz-deactivate="parentSiblings"
      data-vz-self-deactivation="true"
      style="
        --d:flex;
        --ai:center;
        --jc:space-between;
        --m: 0 0 var(--items-gap);
        --p: 12px 24px;
        --bc: var(--vz-c-border);
        --bs: solid;
        --bw: var(--border-width);
        --br: 12px;
        --hov-c:var(--vz-c-white);
        --hov-bc: var(--vz-c-accent2);
        --hov-bgc: var(--vz-c-accent2);
        --p-vz-c:var(--vz-c-white);
        --p-vz-bc: var(--vz-c-accent);
        --p-vz-bgc: var(--vz-c-accent);
        --cur:pointer;"
    >
      Accordion title #1
      <svg style="
      --w:32px;
      --h:32px;
      --tf:rotate(90deg);
      --a-vz-tf:rotate(-90deg);
      --m:0 0 0 auto;"
      xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 -960 960 960" width="40"><path d="M530.565-480.41 339.796-671.436l35.794-35.794 226.563 226.82L375.59-253.847l-35.794-35.794L530.565-480.41Z"></path></svg>
    </h5>
    <div style="
      --d:none;
      --p-vz-d:block;
      --p: 0 24px var(--items-gap);">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium amet architecto dolorem expedita incidunt perspiciatis reiciendis repellendus suscipit voluptatem, voluptates. Aspernatur blanditiis deleniti et iure nam, perferendis porro voluptatibus! Voluptatum?
      </p>
    </div>
  </div>
  <div>
    <h5
      data-varz
      data-vz-activate="parent"
      data-vz-deactivate="parentSiblings"
      data-vz-self-deactivation="true"
      style="
        --d:flex;
        --ai:center;
        --jc:space-between;
        --m: 0 0 var(--items-gap);
        --p: 12px 24px;
        --bc: var(--vz-c-border);
        --bs: solid;
        --bw: var(--border-width);
        --br: 12px;
        --hov-c:var(--vz-c-white);
        --hov-bc: var(--vz-c-accent2);
        --hov-bgc: var(--vz-c-accent2);
        --p-vz-c:var(--vz-c-white);
        --p-vz-bc: var(--vz-c-accent);
        --p-vz-bgc: var(--vz-c-accent);
        --cur:pointer;"
      >
        Accordion title #2
        <svg style="
        --w:32px;
        --h:32px;
        --tf:rotate(90deg);
        --a-vz-tf:rotate(-90deg);
        --m:0 0 0 auto;"
        xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 -960 960 960" width="40"><path d="M530.565-480.41 339.796-671.436l35.794-35.794 226.563 226.82L375.59-253.847l-35.794-35.794L530.565-480.41Z"></path></svg>
    </h5>
    <div style="
      --d:none;
      --p-vz-d:block;
      --p: 0 24px var(--items-gap);">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus minus sit ullam. Amet consequuntur corporis, eaque earum enim excepturi facere harum laudantium omnis placeat quae quia quos similique, sunt, tempore.
      </p>
    </div>
  </div>
  <div>
    <h5
      data-varz
      data-vz-activate="parent"
      data-vz-deactivate="parentSiblings"
      data-vz-self-deactivation="true"
      style="
        --d:flex;
        --ai:center;
        --jc:space-between;
        --m: 0 0 var(--items-gap);
        --p: 12px 24px;
        --bc: var(--vz-c-border);
        --bs: solid;
        --bw: var(--border-width);
        --br: 12px;
        --hov-c:var(--vz-c-white);
        --hov-bc: var(--vz-c-accent2);
        --hov-bgc: var(--vz-c-accent2);
        --p-vz-c:var(--vz-c-white);
        --p-vz-bc: var(--vz-c-accent);
        --p-vz-bgc: var(--vz-c-accent);
        --cur:pointer;"
      >
        Accordion title #3
        <svg style="
        --w:32px;
        --h:32px;
        --tf:rotate(90deg);
        --a-vz-tf:rotate(-90deg);
        --m:0 0 0 auto;"
        xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 -960 960 960" width="40"><path d="M530.565-480.41 339.796-671.436l35.794-35.794 226.563 226.82L375.59-253.847l-35.794-35.794L530.565-480.41Z"></path></svg>
    </h5>
    <div style="
    --d:none;
    --p-vz-d:block;
    --p: 0 24px var(--items-gap);">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi cupiditate doloremque error ipsam rerum, ut? Aliquid at cumque distinctio ea, illo itaque laudantium optio quae quod, ratione, repudiandae similique sit?
      </p>
    </div>
  </div>
</div>

Background accordion

Accordion title #1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem eaque error exercitationem, mollitia necessitatibus nemo nisi ullam. Ex illo incidunt maiores officia rerum? Delectus distinctio fuga nam nisi repudiandae unde?

Accordion title #2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam dicta dolor eius enim est harum id ipsa iure, labore minima nihil, nobis non recusandae rem repudiandae vel? Eaque, magni.

Accordion title #3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium at cum distinctio, dolorem eligendi eos eum eveniet fugiat id, ipsam minus numquam officia omnis perspiciatis saepe suscipit veritatis voluptas? 

<div>
  <div
    style="
    --p: 12px 24px;
    --m: 0 0 24px;
    --bgc: var(--vz-c-bg);
    --br: 32px;
    --bs: solid;
    --bc: var(--vz-c-border);
    --bw: 2px;"
  >
    <h5
      data-varz
      data-vz-activate="parent"
      data-vz-deactivate="parentSiblings"
      data-vz-self-deactivation="true"
      style="
        --d:flex;
        --ai:center;
        --jc:space-between;
        --m: 0;
        --cur:pointer;"
      >
        Accordion title #1
        <svg style="
        --w:32px;
        --h:32px;
        --tf:rotate(90deg);
        --a-vz-tf:rotate(-90deg);
        --m:0 0 0 auto;"
        xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 -960 960 960" width="40"><path d="M530.565-480.41 339.796-671.436l35.794-35.794 226.563 226.82L375.59-253.847l-35.794-35.794L530.565-480.41Z"></path></svg>
    </h5>
    <div style="
      --d:none;
      --p-vz-d:block;
      --m: 16px 0 12px;">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem eaque error exercitationem, mollitia necessitatibus nemo nisi ullam. Ex illo incidunt maiores officia rerum? Delectus distinctio fuga nam nisi repudiandae unde?
      </p>
    </div>                
  </div>
  <div style="
  --p: 12px 24px;
  --m: 0 0 24px;
  --bgc: var(--vz-c-bg);
  --br: 32px;
  --bs: solid;
  --bc: var(--vz-c-border);
  --bw: 2px;">
    <h5
      data-varz
      data-vz-activate="parent"
      data-vz-deactivate="parentSiblings"
      data-vz-self-deactivation="true"
      style="
        --d:flex;
        --ai:center;
        --jc:space-between;
        --m: 0;
        --cur:pointer;"
    >
      Accordion title #2
      <svg style="
      --w:32px;
      --h:32px;
      --tf:rotate(90deg);
      --a-vz-tf:rotate(-90deg);
      --m:0 0 0 auto;"
      xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 -960 960 960" width="40"><path d="M530.565-480.41 339.796-671.436l35.794-35.794 226.563 226.82L375.59-253.847l-35.794-35.794L530.565-480.41Z"></path></svg>
    </h5>
    <div style="
      --d:none;
      --p-vz-d:block;
      --m: 16px 0 12px;">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam dicta dolor eius enim est harum id ipsa iure, labore minima nihil, nobis non recusandae rem repudiandae vel? Eaque, magni.
      </p>
    </div>
  </div>
  <div style="
    --p: 12px 24px;
    --m: 0 0 24px;
    --bgc: var(--vz-c-bg);
    --br: 32px;
    --bs: solid;
    --bc: var(--vz-c-border);
    --bw: 2px;">
      <h5
      data-varz
      data-vz-activate="parent"
      data-vz-deactivate="parentSiblings"
      data-vz-self-deactivation="true"
      style="
      --d:flex;
      --ai:center;
      --jc:space-between;
      --m: 0;
      --cur:pointer;"
      >
      Accordion title #3
      <svg style="
      --w:32px;
      --h:32px;
      --tf:rotate(90deg);
      --a-vz-tf:rotate(-90deg);
      --m:0 0 0 auto;"
      xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 -960 960 960" width="40"><path d="M530.565-480.41 339.796-671.436l35.794-35.794 226.563 226.82L375.59-253.847l-35.794-35.794L530.565-480.41Z"></path></svg>
    </h5>
    <div style="
      --d:none;
      --p-vz-d:block;
      --m: 16px 0 12px;">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium at cum distinctio, dolorem eligendi eos eum eveniet fugiat id, ipsam minus numquam officia omnis perspiciatis saepe suscipit veritatis voluptas?
      </p>
    </div>
  </div>
</div>

Always Open (also known as Collapse)

Accordion title #1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquid blanditiis facilis maxime molestias nulla perferendis. Cumque expedita molestiae quas velit. Delectus enim excepturi nam nostrum numquam, repellendus voluptatem.

Accordion title #2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias assumenda cumque deleniti ex illo, ipsum laudantium necessitatibus odit pariatur placeat praesentium sed temporibus. Dicta dolores labore praesentium quaerat soluta.

Accordion title #3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, eligendi, nostrum? A ab alias blanditiis deleniti, dicta distinctio eligendi facilis in maxime modi nesciunt, omnis, quod rem similique velit voluptatem. 

<div>
  <div class="vz"
    style="
    --p: 12px 24px;
    --m: 0 0 24px;
    --bgc: var(--vz-c-bg);
    --br: 8px;">
    <h5
      data-varz
      data-vz-activate="parent"
      data-vz-deactivate="self,parent"
      data-vz-self-deactivation="true"
      style="
        --d:flex;
        --ai:center;
        --jc:space-between;
        --m: 0;
        --cur:pointer;"
    >
      Accordion title #1
      <svg style="
      --w:32px;
      --h:32px;
      --tf:rotate(90deg);
      --a-vz-tf:rotate(-90deg);
      --m:0 0 0 auto;"
      xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 -960 960 960" width="40"><path d="M530.565-480.41 339.796-671.436l35.794-35.794 226.563 226.82L375.59-253.847l-35.794-35.794L530.565-480.41Z"></path></svg>
    </h5>
    <div style="
      --d:none;
      --p-vz-d:block;
      --m: 16px 0 12px;">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquid blanditiis facilis maxime molestias nulla perferendis. Cumque expedita molestiae quas velit. Delectus enim excepturi nam nostrum numquam, repellendus voluptatem.
      </p>
    </div>
  </div>
  <div style="
    --p: 12px 24px;
    --m: 0 0 24px;
    --bgc: var(--vz-c-bg);
    --br: 8px;">
    <h5
      data-varz
      data-vz-activate="parent"
      data-vz-deactivate="self,parent"
      data-vz-self-deactivation="true"
      style="
        --d:flex;
        --ai:center;
        --jc:space-between;
        --m: 0;
        --cur:pointer;"
    >
      Accordion title #2
      <svg style="
        --w:32px;
        --h:32px;
        --tf:rotate(90deg);
        --a-vz-tf:rotate(-90deg);
        --m:0 0 0 auto;"
        xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 -960 960 960" width="40"><path d="M530.565-480.41 339.796-671.436l35.794-35.794 226.563 226.82L375.59-253.847l-35.794-35.794L530.565-480.41Z"></path></svg>
    </h5>
    <div style="
      --d:none;
      --p-vz-d:block;
      --m: 16px 0 12px;">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias assumenda cumque deleniti ex illo, ipsum laudantium necessitatibus odit pariatur placeat praesentium sed temporibus. Dicta dolores labore praesentium quaerat soluta.
      </p>
    </div>
  </div>
  <div style="
    --p: 12px 24px;
    --m: 0 0 24px;
    --bgc: var(--vz-c-bg);
    --br: 8px;" class="vz">
    <h5
      data-varz
      data-vz-activate="parent"
      data-vz-deactivate="self,parent"
      data-vz-self-deactivation="true"
      style="
        --d:flex;
        --ai:center;
        --jc:space-between;
        --m: 0;
        --cur:pointer;"
    >
      Accordion title #3
      <svg style="
      --w:32px;
      --h:32px;
      --tf:rotate(90deg);
      --a-vz-tf:rotate(-90deg);
      --m:0 0 0 auto;"
      xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 -960 960 960" width="40"><path d="M530.565-480.41 339.796-671.436l35.794-35.794 226.563 226.82L375.59-253.847l-35.794-35.794L530.565-480.41Z"></path></svg>
    </h5>
    <div style="
      --d:none;
      --p-vz-d:block;
      --m: 16px 0 12px;">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, eligendi, nostrum? A ab alias blanditiis deleniti, dicta distinctio eligendi facilis in maxime modi nesciunt, omnis, quod rem similique velit voluptatem.
    </p>
    </div>
  </div>
</div>