Zusty CSS Logo
Zusty CSS Logo
Version 1.2.0 is out now. Check out Release Notes.

Element Group

Container for grouping up elements.


You can make a group of items by using element group. To use it, make div and add class zust-el-group. Then place the elements inside of that div.

<div class="zust-el-group">
  <button class="zust-btn zust-primary">Item 1</button>
  <button class="zust-btn zust-primary">Item 2</button>
  <button class="zust-btn zust-primary">Item 3</button>
  <button class="zust-btn zust-primary">Item 4</button>
</div>

You can also group item's vertically, just add class zust-vertical to the div.

<div class="zust-el-group zust-vertical">
  <button class="zust-btn zust-primary">Item 1</button>
  <button class="zust-btn zust-primary">Item 2</button>
  <button class="zust-btn zust-primary">Item 3</button>
  <button class="zust-btn zust-primary">Item 4</button>
</div>

You can even group up dropdowns as well.

  • Notepad
  • Atom
  • Item 1
  • Item Blah
<div class="zust-el-group">
  <button class="zust-btn zust-primary">Open</button>
  <div class="zust-dropdown">
    <button class="zust-btn zust-primary">
      <span class="zust-icon">
        <i class="zust-caret-down"></i>
      </span>
    </button>
    <ul class="zust-items">
      <li><span>Notepad</span></li>
      <li><span>Atom</span></li>
    </ul>
  </div>
</div>

<div class="zust-el-group">
  <div class="zust-dropdown">
    <button class="zust-btn zust-primary">
      <span class="zust-icon">
        <i class="zust-caret-down"></i>
      </span>
    </button>
    <ul class="zust-items">
      <li><span>Item 1</span></li>
      <li><span>Item Blah</span></li>
    </ul>
  </div>
  <button class="zust-btn zust-primary">After</button>
</div>

checkSuccessfully Copied

Get involved in improving Zusty CSS.

Report a BugFeature Request

Support us by

Starring it on GitHubJoining our Discord ServerSharing on Twitter

Rapid Search Inside of Docs