Mixed Grid

You can use Mixed grid to quickly setup a fast layout composition for images, videos or other visual like assets which can be dragged and dropped on the board. You can add different elements inside this composition to answer your design needs.

Explore a working example in Glitch


Tab one
Tab two
<div class="grid">  
  <!-- input -->
    <div class="cs1 ce12">
      <input class="input input-small" type="text" placeholder="Enter something"/>
    </div>
  <!-- tabs -->
  <div class="cs1 ce12">
    <div class="tabs">
      <div class="tabs-header-list">
        <div tabindex="0" class="tab tab-active">
          <div class="tab-text tab-badge" data-badge="1,000">Tab</div>
        </div>
        <div tabindex="0" class="tab">
          <div class="tab-text tab-badge" data-badge="2,201">Tab</div>
        </div>
        <div tabindex="0" class="tab">
          <div class="tab-text tab-badge" data-badge="2,858">Tab</div>
        </div>
      </div>
    </div>
  <!-- buttons -->
    <button class="button-icon button-icon-small icon-eye" type="button" ></button>
    <button class="button-icon button-icon-small icon-parameters" type="button" ></button>
  </div>
  <!-- assets -->
    <div class="cs1 ce12 placeholder"></div>
    <div class="cs1 ce12 placeholder"></div>
    <div class="cs1 ce12 placeholder"></div>
</div>

How does it work?

You can explore a working example if you follow the Glitch link and remix the project and use it as a base to easily create your own app.