Box

Generic bordered content box for grouping content.

Basic usage

Default box content

<div class="kit-box">Default box content</div>

Variants

Rounded

Flat (no border)

Raised (shadow)

<div class="kit-box -rounded">Rounded</div>
<div class="kit-box -flat">Flat (no border)</div>
<div class="kit-box -raised">Raised (shadow)</div>

Semantic colors

Primary

Success

Warning

Danger

Info

<div class="kit-box -primary">Primary</div>
<div class="kit-box -success">Success</div>
<div class="kit-box -warning">Warning</div>
<div class="kit-box -danger">Danger</div>
<div class="kit-box -info">Info</div>