GroundworkCSS ♥ UI Elements

Boxes

This is a box paragraph.

<p class="box">This is a box paragraph.</p>

This is a box heading 2.

<h2 class="box">This is a box heading 2.</h2>

This is a box heading 4.

<h4 class="box">This is a box heading 4.</h4>

This is a box heading 6.

<h6 class="box">This is a box heading 6.</h6>

Another Box

Boxes can contain other elements, such as:

Tables
Cell 1	Cell 2	Cell 3	Cell 4

And much more.

<div class="box">
  <h3>Another Box</h3>
  <p>Boxes can contain other elements, such as:</p>
  <div class="row gap-bottom">
    <div class="three fourths small-tablet pad-right no-pad-mobile">
      <input placeholder="Input fields">
    </div>
    <div class="one fourth small-tablet">
      <button class="block asphalt">Buttons</button>
    </div>
  </div>
  <table class="asphalt">
    <thead>
      <tr>
        <th colspan="4">Tables</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
    </tbody>
  </table>
  <p>And <em>much</em> more.</p>
</div>

States

This is an info box.

This is a success box.

This is a question box.

This is an alert box.

This is a warning box.

This is an error box.

Square

This is a square box.

Round

This is a round box.

Colors

This is a yellow box.

This is a orange box.

This is a red box.

This is a pink box.

This is a purple box.

This is a asphalt box.

This is a blue box.

This is a turquoise box.

This is a green box.