Standard Box

<div class="box">
...
</div>
<div class="primary box">
...
</div>
<div class="secondary box">
...
</div>

Flat Box

<div class="flat box">
...
</div>
<div class="flat primary box">
...
<div class="negative flat box">
...
</div>
<div class="positive flat box">
...
</div>

Grouped Box

You may want wrap these boxes something container like .container. Styr does not set style for that wrapper, you can use it by yourself as you like.

<div class="container">
  <div class="grouped box">
  ...
  </div>
  <div class="grouped box">
  ...
  </div>
</div>

Grouped + Flat Box

<div class="container">
  <div class="grouped flat box">
  ...
  </div>
  <div class="grouped flat box">
  ...
  </div>
</div>

Box + (inner) Grid

Box can have inner grids.

<div class="container">
  <div class="attached primary header">
  ...
  </div>
  <div class="attached box">
    <div class="grid">
      <div class="column-3 column-n-8">Foo</div>
      <div class="column-13 column-n-8">Bar</div>
    </div>
  </div>
</div>

Attached Header

<div class="container">
  <div class="attached header">
  ...
  </div>
  <div class="attached box">
  ...
  </div>
</div>

Attached Footer

<div class="container">
  <div class="attached box">
  ...
  </div>
  <div class="attached primary footer">
  ...
  </div>
</div>

<div class="container">
  <div class="attached box">
  ...
  </div>
  <div class="attached negative footer">
  ...
  </div>
</div>

<div class="container">
  <div class="attached box">
  ...
  </div>
  <div class="attached positive footer">
  ...
</div>

Attached (Footer) Message

<div class="container">
  <div class="attached box">
  ...
  </div>
  <div class="attached warn message">
  ...
  </div>
</div>

Combination Examples

<div class="container">
  <div class="attached header">
  ...
  </div>
  <div class="attached grouped box">
  ...
  </div>
  <div class="attached grouped box">
  ...
  </div>
  <div class="attached primary message">
  ...
  </div>
</div>

<div class="container">
  <div class="attached header">
  ...
  </div>
  <div class="attached box">
  ...
  </div>
  <div class="attached secondary message">
  ...
  </div>
</div>