@moodxd/component-box v1.0.3

MoO Box

Standard

<div class="Box">
  <div class="Box-header">Header</div>
  <p>Body</p>
  <div class="Box-footer">Footer</div>
</div>

Separated Header

<div class="Box">
  <div class="Box-header Box-header--separate">Header</div>
  <p>Body</p>
  <div class="Box-footer">Footer</div>
</div>

Edge to Edge

<div class="Box Box--edgeToEdge">
  <div class="Box-header">Header</div>
  <p>Body</p>
  <div class="Box-footer">Footer</div>
</div>

Sizing

<div class="Box Box--sm">
  <div class="Box-header">Header</div>
  <p>Body</p>
  <div class="Box-footer">Footer</div>
</div>

<div class="Box">
  <div class="Box-header">Header</div>
  <p>Body</p>
  <div class="Box-footer">Footer</div>
</div>

Stateful

<div class="Box Box--warning">
  <div class="Box-header">Header</div>
  <p>Body</p>
  <div class="Box-footer">Footer</div>
</div>

<div class="Box Box--alert">
  <div class="Box-header">Header</div>
  <p>Body</p>
  <div class="Box-footer">Footer</div>
</div>

<div class="Box Box--success">
  <div class="Box-header">Header</div>
  <p>Body</p>
  <div class="Box-footer">Footer</div>
</div>

<div class="Box Box--code">
  <div class="Box-header">Header</div>
  <p>Body</p>
  <div class="Box-footer">Footer</div>
</div>

<div class="Box Box--script">
  <div class="Box-header">Header</div>
  <p>Body</p>
  <div class="Box-footer">Footer</div>
</div>

Outline

<div class="Box Box--outline">
  <div class="Box-header">Header</div>
  <p>Body</p>
  <div class="Box-footer">Footer</div>
</div>

<div class="Box Box--outline Box--warning">
  <div class="Box-header">Header</div>
  <p>Body</p>
  <div class="Box-footer">Footer</div>
</div>

<div class="Box Box--outline Box--alert">
  <div class="Box-header">Header</div>
  <p>Body</p>
  <div class="Box-footer">Footer</div>
</div>

<div class="Box Box--outline Box--success">
  <div class="Box-header">Header</div>
  <p>Body</p>
  <div class="Box-footer">Footer</div>
</div>

<div class="Box Box--outline Box--code">
  <div class="Box-header">Header</div>
  <p>Body</p>
  <div class="Box-footer">Footer</div>
</div>

<div class="Box Box--outline Box--script">
  <div class="Box-header">Header</div>
  <p>Body</p>
  <div class="Box-footer">Footer</div>
</div>