Teutonic CSS

Box

←

Boxes are rectangles with visible outlines. Use them for navigational elements and to structure your contents.

There are two modes: div.box is passive, while a.box, label.box or button.box will be an active version, adding a background color and hover/focus effects.

Syntax: .box

SCSS: _box.scss

Interactive

a.box a.box

Passive

div.box

<div class="grid gap_s">
  <div class="span-6">
    <h5 class="bo-b_xs pa-b_xs">Interactive</h5>
    <div class="flex gap-no wrap-no text-mono">
      <a class="box text-clip" href="">a.box</a>
      <a class="box text-clip" href="">a.box</a>
    </div>
  </div>
  <div class="span-6">
    <h5 class="bo-b_xs pa-b_xs">Passive</h5>
    <div class="flex gap-no wrap-no text-mono">
      <div class="box text-clip">div.box</div>
      <div class="box text-clip">div.box</div>
    </div>
  </div>
</div>