box.md

go back to Docs

Box

Box is a simple container element. By default comes with a flex display type.

<div class="box">
  <!-- content -->
</div>

Levels

Box elements can have levels between 1-5 (default: 2), each level has a brighter of darker background color (depending on the theme.)

'
<div class="box bg-1">
  <div class="box bg-2">
    <div class="box bg-3">
      <div class="box bg-4">
        <div class="box bg-5">
          <div class="box bg-6">
            <!-- content -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Class Names

• box - a container element with a flex display type
• bg-1 - a class that changes the background color of the box to a darker or lighter shade
• bg-2 - a class that changes the background color of the box to a darker or lighter shade
• bg-3 - a class that changes the background color of the box to a darker or lighter shade
• bg-4 - a class that changes the background color of the box to a darker or lighter shade
• bg-5 - a class that changes the background color of the box to a darker or lighter shade
• bg-6 - a class that changes the background color of the box to a darker or lighter shade
• rounded - a class that adds a border radius to the box