# Links

- ## `.cw-link`

  Code
  `<a class="cw-link" href="#">...</a>`
  Example
  ...

- ## `.cw-link-external`

  Code
  `<a class="cw-link cw-link-external" href="#">...</a>`
  Example
  ...

# Text

- ## `.cw-text`

  Code
  `<span class="cw-text">...</span>`
  Example
  ...

# Buttons

Note: the button classes work reliably only with `a`, `button`, `input[type=submit]`, `input[type=button]`, and `input[type=reset]`

- ## `.cw-button`

  Code
  `<a class="cw-button" href="#">...</a>` `<button class="cw-button">...</button>` `<input class="cw-button" type="submit" value="..." />` `<input class="cw-button" type="button" value="..." />` `<input class="cw-button" type="reset" value="..." />`
  Example
  Button

- ## `.cw-button-constrained`

  Code
  `<a class="cw-button cw-button-constrained" href="#">...</a>` `<button class="cw-button cw-button-constrained">...</button>` `<input class="cw-button cw-button-constrained" type="submit" value="..." />` `<input class="cw-button cw-button-constrained" type="button" value="..." />` `<input class="cw-button cw-button-constrained" type="reset" value="..." />`

      <ul class="cw-button-group cw-button-constrained">
          <li><a href="#">...</a></li>
          <li><button>...</button></li>
          <li><input type="submit" value="..." /></li>
          <li><input type="button" value="..." /></li>
          <li><input type="reset" value="..." /></li>
      </ul>

  Example
  ...
  - ...

- ## `.cw-button-group`

  Note: Currently implemented using `ul` only

  Code

      <ul class="cw-button-group">
          <li><a href="#">...</a></li>
          <li><button>...</button></li>
          <li><input type="submit" value="..." /></li>
          <li><input type="button" value="..." /></li>
          <li><input type="reset" value="..." /></li>
      </ul>

  Example
  - ...

- ## `.cw-button-active`

  Code
  `<a class="cw-button cw-button-active" href="#">...</a>` `<button class="cw-button cw-button-active">...</button>` `<input class="cw-button cw-button-active" type="submit" value="..." />` `<input class="cw-button cw-button-active" type="button" value="..." />` `<input class="cw-button cw-button-active" type="reset" value="..." />`

      <ul class="cw-button-group">
          <li><a class="cw-button-active" href="#">...</a></li>
          <li><button>...</button></li>
          <li><input type="submit" value="..." /></li>
          <li><input type="button" value="..." /></li>
          <li><input type="reset" value="..." /></li>
      </ul>

  Example
  ...
  - ...

- ## `.cw-button-elegant`

  Code

      <a class="cw-button cw-button-elegant" href="#">Button</a>
      <button class="cw-button cw-button-elegant">Button</button>
      <input class="cw-button cw-button-elegant" type="submit" value="Button" />
      <input class="cw-button cw-button-elegant" type="button" value="Button" />
      <input class="cw-button cw-button-elegant" type="reset" value="Button" />

      <a class="cw-button cw-button-constrained cw-button-elegant" href="#">...</a>
      <button class="cw-button cw-button-constrained cw-button-elegant">...</button>
      <input class="cw-button cw-button-constrained cw-button-elegant" type="submit" value="..." />
      <input class="cw-button cw-button-constrained cw-button-elegant" type="button" value="..." />
      <input class="cw-button cw-button-constrained cw-button-elegant" type="reset" value="..." />

      <ul class="cw-button-group cw-button-constrained cw-button-elegant">
          <li><a href="#">...</a></li>
          <li><button>...</button></li>
          <li><input type="submit" value="..." /></li>
          <li><input type="button" value="..." /></li>
          <li><input type="reset" value="..." /></li>
      </ul>

      <ul class="cw-button-group cw-button-elegant">
          <li><a href="#">...</a></li>
          <li><button>...</button></li>
          <li><input type="submit" value="..." /></li>
          <li><input type="button" value="..." /></li>
          <li><input type="reset" value="..." /></li>
      </ul>

      <a class="cw-button cw-button-active cw-button-elegant" href="#">...</a>
      <button class="cw-button cw-button-active cw-button-elegant">...</button>
      <input class="cw-button cw-button-active cw-button-elegant" type="submit" value="..." />
      <input class="cw-button cw-button-active cw-button-elegant" type="button" value="..." />
      <input class="cw-button cw-button-active cw-button-elegant" type="reset" value="..." />

      <ul class="cw-button-group cw-button-elegant">
          <li><a class="cw-button-active" href="#">...</a></li>
          <li><button>...</button></li>
          <li><input type="submit" value="..." /></li>
          <li><input type="button" value="..." /></li>
          <li><input type="reset" value="..." /></li>
      </ul>

  Example
  Button
  ...
  - ...
  - ...
  ...
  - ...

# Images

- ## `.cw-image`

  Code
  `<img class="cw-image" src="../images/feature.jpg" alt="..." />`
  Example

- ## `.cw-image-thumbnail`

  Code
  `<img class="cw-image cw-image-thumbnail" src="../images/feature.jpg" alt="..." />`
  Example

- ## `.cw-image-preview`

  Code
  `<img class="cw-image cw-image-preview" src="../images/feature.jpg" alt="..." />`
  Example

- ## `.cw-image-large`

  Code
  `<img class="cw-image cw-image-large" src="../images/feature.jpg" alt="..." />`
  Example

- ## `.cw-image-full`

  Code
  `<img class="cw-image cw-image-full" src="../images/feature.jpg" alt="..." />`
  Example

# Sections

Note: any or all of the header, body, or footer segments within a section can be omitted

- ## `.cw-section`

  Code

      <div class="cw-section">
          <div class="cw-section-header">
              ...header...
          </div>

          <div class="cw-section-body">
              ...body...
          </div>

          <div class="cw-section-footer">
              ...footer...
          </div>
      </div>

  Example
  ...header...
  ...body...

- ## `.cw-section-header`

  Code

      <div class="cw-section">
          <div class="cw-section-header">
              ...header...
          </div>

          <div class="cw-section-body">
              ...body...
          </div>

          <div class="cw-section-footer">
              ...footer...
          </div>
      </div>

  Example
  ...header...
  ...body...

- ## `.cw-section-body`

  Code

      <div class="cw-section">
          <div class="cw-section-header">
              ...header...
          </div>

          <div class="cw-section-body">
              ...body...
          </div>

          <div class="cw-section-footer">
              ...footer...
          </div>
      </div>

  Example
  ...header...
  ...body...

- ## `.cw-section-footer`

  Code

      <div class="cw-section">
          <div class="cw-section-header">
              ...header...
          </div>

          <div class="cw-section-body">
              ...body...
          </div>

          <div class="cw-section-footer">
              ...footer...
          </div>
      </div>

  Example
  ...header...
  ...body...

- ## `.cw-section-shadowed`

  Code

      <div class="cw-section cw-section-shadowed">
          <div class="cw-section-header">
              ...header...
          </div>

          <div class="cw-section-body">
              ...body...
          </div>

          <div class="cw-section-footer">
              ...footer...
          </div>
      </div>

  Example
  ...header...
  ...body...

- ## `.cw-section-popup`

  Note: The exact position of pop-ups must be declared separately

  Code

      <div class="cw-section cw-section-popup">
          <div class="cw-section-header">
              ...header...
          </div>

          <div class="cw-section-body">
              ...body...
          </div>

          <div class="cw-section-footer">
              ...footer...
          </div>
      </div>

      <div class="cw-section cw-section-shadowed cw-section-popup">
          <div class="cw-section-header">
              ...header...
          </div>

          <div class="cw-section-body">
              ...body...
          </div>

          <div class="cw-section-footer">
              ...footer...
          </div>
      </div>

  Example
  No example yet

- ## `.cw-section-drawer`

  Code

      <div class="cw-section cw-section-drawer">
          <div class="cw-section-header">
              ...header...
          </div>

          <div class="cw-section-body">
              ...body...
          </div>

          <div class="cw-section-footer">
              ...footer...
          </div>
      </div>

      <div class="cw-section cw-section-shadowed cw-section-drawer">
          <div class="cw-section-header">
              ...header...
          </div>

          <div class="cw-section-body">
              ...body...
          </div>

          <div class="cw-section-footer">
              ...footer...
          </div>
      </div>

  Example
  No example yet

- ## `.cw-section-elegant`

  Code

      <div class="cw-section cw-section-elegant">
          <div class="cw-section-header">
              ...header...
          </div>

          <div class="cw-section-body">
              ...body...
          </div>

          <div class="cw-section-footer">
              ...footer...
          </div>
      </div>

  Example
  ...header...
  ...body...

- ## `.cw-section-simple`

  Code

      <div class="cw-section cw-section-simple">
          <div class="cw-section-header">
              ...header...
          </div>

          <div class="cw-section-body">
              ...body...
          </div>

          <div class="cw-section-footer">
              ...footer...
          </div>
      </div>

  Example
  ...header...
  ...body...

# Tables

- ## `.cw-table`

  Code

      <table class="cw-table">
          <caption>...</caption>

          <thead>
              <tr>
                  <th>...<th>
                  <th>...<th>
              </tr>
              <tr>
                  <td>...<td>
                  <td>...<td>
              </tr>
          </thead>

          <tfoot>
              <tr>
                  <th>...<th>
                  <th>...<th>
              </tr>
              <tr>
                  <td>...<td>
                  <td>...<td>
              </tr>
          </tfoot>

          <tbody>
              <tr>
                  <th>...<th>
                  <th>...<th>
              </tr>
              <tr>
                  <td>...<td>
                  <td>...<td>
              </tr>
          </tbody>
      </table>

  Example

  ...
  ... |  | ... |
  --- | --- | --- | ---
  ... |  | ... |
  ... |  | ... |
  ... |  | ... |

- ## `.cw-table-padded`

  Code

      <table class="cw-table cw-table-padded">
          <tbody>
              <tr>
                  <th>...<th>
                  <td>...<td>
              </tr>
              <tr>
                  <th>...<th>
                  <td>...<td>
              </tr>
          </tbody>
      </table>

  Example

  ... |  | ... |
  ... |  | ... |

- ## `.cw-table-emphasizedcells`

  Note: Currently implemented using `table` only

  Code

      <table class="cw-table cw-table-emphasizedcells">
          <tbody>
              <tr>
                  <th>...<th>
                  <td>...<td>
              </tr>
              <tr>
                  <th>...<th>
                  <td>...<td>
              </tr>
          </tbody>
      </table>

  Example

  ... |  | ... |
  ... |  | ... |

- ## `.cw-table-sideheaders`

  Note: Currently implemented using `table` only

  Code

      <table class="cw-table cw-table-sideheaders">
          <tbody>
              <tr>
                  <th>...<th>
                  <td>...<td>
              </tr>
              <tr>
                  <th>...<th>
                  <td>...<td>
              </tr>
          </tbody>
      </table>

  Example

  ... |  | ... |
  ... |  | ... |

- ## `.cw-table-sectioned`

  Note: Currently implemented using `table` only

  Code

      <table class="cw-table cw-table-sectioned">
          <tbody>
              <tr>
                  <th>...<th>
                  <td>...<td>
              </tr>
              <tr>
                  <th>...<th>
                  <td>...<td>
              </tr>
          </tbody>
      </table>

  Example

  ... |  | ... |
  ... |  | ... |

- ## `.cw-table-fullsize`

  Code

      <table class="cw-table cw-table-fullsize">
          <tbody>
              <tr>
                  <th>...<th>
                  <td>...<td>
              </tr>
              <tr>
                  <th>...<th>
                  <td>...<td>
              </tr>
          </tbody>
      </table>

  Example

  ... |  | ... |
  ... |  | ... |

- ## `.cw-table-pagination`

  Note: Currently implemented using `table` only

  Code

      <table class="cw-table cw-table-pagination">
          <tfoot>
              <tr>
                  <th>← Previous</th>
                  <th>Next →</th>
              </tr>
          </tfoot>

          <tbody>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
          </tbody>
      </table>

  Example

  ← Previous | Next →
  --- | ---
  ... | ...
  ... | ...

- ## `.cw-table-fauxtable`

  Code

      <div class="cw-table cw-table-fauxtable">
          <div class="cw-table-fauxrow">
              <div class="cw-table-fauxcell">R1, C1</div>
              <div class="cw-table-fauxcell">R1, C2</div>
          </div>
          <div class="cw-table-fauxrow">
              <div class="cw-table-fauxcell">R2, C1</div>
              <div class="cw-table-fauxcell">R2, C2</div>
          </div>
      </div>

      <div class="cw-table cw-table-padded cw-table-fauxtable">
          <div class="cw-table-fauxrow">
              <div class="cw-table-fauxcell">R1, C1</div>
              <div class="cw-table-fauxcell">R1, C2</div>
          </div>
          <div class="cw-table-fauxrow">
              <div class="cw-table-fauxcell">R2, C1</div>
              <div class="cw-table-fauxcell">R2, C2</div>
          </div>
      </div>

  Example
  R1, C1
  R1, C2
  R2, C1
  R2, C2
  R1, C1
  R1, C2
  R2, C1
  R2, C2

- ## `.cw-table-fauxrow`

  Code

      <div class="cw-table cw-table-fauxtable">
          <div class="cw-table-fauxrow">
              <div class="cw-table-fauxcell">R1, C1</div>
              <div class="cw-table-fauxcell">R1, C2</div>
          </div>
          <div class="cw-table-fauxrow">
              <div class="cw-table-fauxcell">R2, C1</div>
              <div class="cw-table-fauxcell">R2, C2</div>
          </div>
      </div>

  Example
  R1, C1
  R1, C2
  R2, C1
  R2, C2

- ## `.cw-table-fauxcell`

  Code

      <div class="cw-table cw-table-fauxtable">
          <div class="cw-table-fauxrow">
              <div class="cw-table-fauxcell">R1, C1</div>
              <div class="cw-table-fauxcell">R1, C2</div>
          </div>
          <div class="cw-table-fauxrow">
              <div class="cw-table-fauxcell">R2, C1</div>
              <div class="cw-table-fauxcell">R2, C2</div>
          </div>
      </div>

  Example
  R1, C1
  R1, C2
  R2, C1
  R2, C2

- ## `.cw-table-striped`

  Note: Currently implemented using `table` only

  Code

      <table class="cw-table cw-table-striped">
          <caption>...</caption>

          <thead>
              <tr>
                  <th>...</th>
                  <th>...</th>
              </tr>
          </thead>

          <tfoot>
              <tr>
                  <th>...</th>
                  <th>...</th>
              </tr>
          </tfoot>

          <tbody>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
          </tbody>
      </table>

      <table class="cw-table cw-table-padded cw-table-striped">
          <caption>...</caption>

          <thead>
              <tr>
                  <th>...</th>
                  <th>...</th>
              </tr>
          </thead>

          <tfoot>
              <tr>
                  <th>...</th>
                  <th>...</th>
              </tr>
          </tfoot>

          <tbody>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
          </tbody>
      </table>

      <table class="cw-table cw-table-emphasizedcells cw-table-striped">
          <tbody>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
          </tbody>
      </table>

      <table class="cw-table cw-table-sideheaders cw-table-striped">
          <tbody>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
          </tbody>
      </table>

      <table class="cw-table cw-table-sectioned cw-table-striped">
          <tbody>
              <tr><th scope="rowspan" colspan="2">Section 1</th></tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
          </tbody>

          <tbody>
              <tr><th scope="rowspan" colspan="2">Section 2</th></tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
          </tbody>
      </table>

      <table class="cw-table cw-table-fullsize cw-table-striped">
          <tbody>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
          </tbody>
      </table>

      <table class="cw-table cw-table-pagination cw-table-striped">
          <tfoot>
              <tr>
                  <th>← Previous</th>
                  <th>Next →</th>
              </tr>
          </tfoot>

          <tbody>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
          </tbody>
      </table>

  Example

  ...
  ... | ...
  --- | ---
  ... | ...
  ... | ...
  ... | ...

  ...
  ... | ...
  --- | ---
  ... | ...
  ... | ...
  ... | ...

  ... | ...
  ... | ...

  ... | ...
  ... | ...

  Section 1
  ... | ...
  ... | ...
  Section 2
  ... | ...
  ... | ...

  ... | ...
  ... | ...

  ← Previous | Next →
  --- | ---
  ... | ...
  ... | ...

- ## `.cw-table-simple`

  Note: Currently implemented using `table` only

  Code

      <table class="cw-table cw-table-simple">
          <caption>...</caption>

          <thead>
              <tr>
                  <th>...</th>
                  <th>...</th>
              </tr>
          </thead>

          <tfoot>
              <tr>
                  <th>...</th>
                  <th>...</th>
              </tr>
          </tfoot>

          <tbody>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
          </tbody>
      </table>

      <table class="cw-table cw-table-padded cw-table-simple">
          <caption>...</caption>

          <thead>
              <tr>
                  <th>...</th>
                  <th>...</th>
              </tr>
          </thead>

          <tfoot>
              <tr>
                  <th>...</th>
                  <th>...</th>
              </tr>
          </tfoot>

          <tbody>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
          </tbody>
      </table>

      <table class="cw-table cw-table-emphasizedcells cw-table-simple">
          <tbody>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
          </tbody>
      </table>

      <table class="cw-table cw-table-sideheaders cw-table-simple">
          <tbody>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
          </tbody>
      </table>

      <table class="cw-table cw-table-sectioned cw-table-simple">
          <tbody>
              <tr><th scope="rowspan" colspan="2">Section 1</th></tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
          </tbody>

          <tbody>
              <tr><th scope="rowspan" colspan="2">Section 2</th></tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
          </tbody>
      </table>

      <table class="cw-table cw-table-fullsize cw-table-simple">
          <tbody>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
          </tbody>
      </table>

      <table class="cw-table cw-table-pagination cw-table-simple">
          <tfoot>
              <tr>
                  <th>← Previous</th>
                  <th>Next →</th>
              </tr>
          </tfoot>

          <tbody>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
          </tbody>
      </table>

  Example

  ...
  ... | ...
  --- | ---
  ... | ...
  ... | ...
  ... | ...

  ...
  ... | ...
  --- | ---
  ... | ...
  ... | ...
  ... | ...

  ... | ...
  ... | ...

  ... | ...
  ... | ...

  Section 1
  ... | ...
  ... | ...
  Section 2
  ... | ...
  ... | ...

  ... | ...
  ... | ...

  ← Previous | Next →
  --- | ---
  ... | ...
  ... | ...

- ## `.cw-table-map`

  Note: Currently implemented using `table` only

  Code

      <table class="cw-table cw-table-map">
          <tbody>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
          </tbody>
      </table>

      <table class="cw-table cw-table-padded cw-table-map">
          <tbody>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
          </tbody>
      </table>

      <table class="cw-table cw-table-sectioned cw-table-map">
          <tbody>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
          </tbody>

          <tbody>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
          </tbody>
      </table>

      <table class="cw-table cw-table-fullsize cw-table-map">
          <tbody>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
          </tbody>
      </table>

      <table class="cw-table cw-table-pagination cw-table-map">
          <tfoot>
              <tr>
                  <th>← Previous</th>
                  <th>Next →</th>
              </tr>
          </tfoot>

          <tbody>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
          </tbody>
      </table>

  Example

  ... | ...
  ... | ...

  ... | ...
  ... | ...

  ... | ...
  ... | ...
  ... | ...
  ... | ...

  ... | ...
  ... | ...

  ← Previous | Next →
  --- | ---
  ... | ...
  ... | ...

- ## `.cw-table-boxed`

  Note: Currently implemented using `table` only

  Code

      <table class="cw-table cw-table-boxed">
          <tbody>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
          </tbody>
      </table>

      <table class="cw-table cw-table-padded cw-table-boxed">
          <tbody>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
          </tbody>
      </table>

      <table class="cw-table cw-table-fullsize cw-table-boxed">
          <tbody>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
              <tr>
                  <th>...</th>
                  <td>...</td>
              </tr>
          </tbody>
      </table>

  Example

  ... | ...
  ... | ...

  ... | ...
  ... | ...

  ... | ...
  ... | ...

# Forms

- ## `.cw-form`

  Code

      <form class="cw-form">
         <fieldset>
             <legend><label>...</label></legend>

             <ul>
                 <li><input type="..." value="..." /></li>
                 <li><input type="..." value="..." /></li>
                 <li><input type="..." value="..." /></li>
             </ul>
         </fieldset>

         <fieldset>
             <legend>...</legend>

             <label>...</label>
             <input type="..." value="..." />

             <label>...</label>
             <textarea>...</textarea>

             <label>...</label>
             <select>
                 <option value="...">...</option>
                 <option value="...">...</option>
             </select>
         </fieldset>
      </form>

      <form class="cw-form">
         <label>...</label>
         <input type="..." value="..." />

         <label>...</label>
         <textarea>...</textarea>

         <label>...</label>
         <select>
             <option value="...">...</option>
             <option value="...">...</option>
         </select>
      </form>

  Example
  ...
  ... ... ... ... ...
  ... ... ... ...

- ## `.cw-form-nonessential`

  Code

      <form>
        <p class="cw-form-nonessential">This is some helpful text pertaining to a form, but is not essential.</p>

        <label class="cw-form-nonessential">Helpful Text</label>
        <input type="text" value="..." />
      </form>

  Example

  This is some helpful text pertaining to a form, but is not essential.

  Helpful Text

- ## `.cw-form-required`

  Code

      <form>
        <label class="cw-form-required">Label</label>
        <input type="text" class="cw-form-required" value="..." />

        <p>A long-form message about <span class="cw-form-required">required</span> fields.</p>
      </form>

  Example
  Label

  A long-form message about required fields.

- ## `.cw-form-error`

  Code

      <form>
        <label class="cw-form-error">Label</label>
        <input type="text" class="cw-form-error" value="..." />

        <ul class="cw-form-error">
          <li>Error message</li>
          <li>Error message</li>
        </ul>

        <p class="cw-form-error">A long-form <span class="cw-form-error">error</span> message.</p>
      </form>

  Example
  Label
  - Error message
  - Error message

  A long-form error message.

- ## `.cw-form-modified`

  Code

      <form>
        <label class="cw-form-modified">Label</label>
        <input type="text" class="cw-form-modified" value="..." />

        <ul class="cw-form-modified">
          <li>Message about a modified field</li>
          <li>Message about a modified field</li>
        </ul>

        <p class="cw-form-modified">A long-form message about <span class="cw-form-modified">modified</span> fields.</p>
      </form>

  Example
  Label
  - Message about a modified field
  - Message about a modified field

  A long-form message about modified fields.

# Lists

- ## `.cw-list`

  Code

      <ol class="cw-list">
          <li>Ordered Item</li>
          <li>Ordered Item</li>
          <li>Ordered Item</li>
      </ol>

      <ul class="cw-list">
          <li>Unordered Item</li>
          <li>Unordered Item</li>
          <li>Unordered Item</li>
      </ul>

      <dl class="cw-list">
          <dt>Term</dt>
          <dd>Definition</dd>
          <dt>Term</dt>
          <dd>Definition</dd>
      </dl>

  Example
  1. Ordered Item
  2. Ordered Item
  3. Ordered Item
  - Unordered Item
  - Unordered Item
  - Unordered Item
  Term
    Definition
  Term
    Definition

- ## `.cw-list-nobullets`

  Note: Currently implemented using `ol` and `ul` only

  Code

      <ol class="cw-list cw-list-nobullets">
          <li>Ordered Item</li>
          <li>Ordered Item</li>
          <li>Ordered Item</li>
      </ol>

      <ul class="cw-list cw-list-nobullets">
          <li>Unordered Item</li>
          <li>Unordered Item</li>
          <li>Unordered Item</li>
      </ul>

  Example
  1. Ordered Item
  2. Ordered Item
  3. Ordered Item
  - Unordered Item
  - Unordered Item
  - Unordered Item

- ## `.cw-list-noindent`

  Note: Currently implemented using `ol` and `ul` only

  Code

      <ol class="cw-list cw-list-noindent">
          <li>Ordered Item</li>
          <li>Ordered Item</li>
          <li>Ordered Item</li>
      </ol>

      <ul class="cw-list cw-list-noindent">
          <li>Unordered Item</li>
          <li>Unordered Item</li>
          <li>Unordered Item</li>
      </ul>

  Example
  1. Ordered Item
  2. Ordered Item
  3. Ordered Item
  - Unordered Item
  - Unordered Item
  - Unordered Item

- ## `.cw-list-unmarked`

  Note: Currently implemented using `ol` and `ul` only

  Code

      <ol class="cw-list cw-list-unmarked">
          <li>Ordered Item</li>
          <li>Ordered Item</li>
          <li>Ordered Item</li>
      </ol>

      <ul class="cw-list cw-list-unmarked">
          <li>Unordered Item</li>
          <li>Unordered Item</li>
          <li>Unordered Item</li>
      </ul>

  Example
  1. Ordered Item
  2. Ordered Item
  3. Ordered Item
  - Unordered Item
  - Unordered Item
  - Unordered Item

- ## `.cw-list-horizontal`

  Note: Currently implemented using `ol`, `ul`, and `dl` only

  Code

      <ol class="cw-list cw-list-horizontal">
          <li>Ordered Item</li>
          <li>Ordered Item</li>
          <li>Ordered Item</li>
      </ol>

      <ul class="cw-list cw-list-horizontal">
          <li>Unordered Item</li>
          <li>Unordered Item</li>
          <li>Unordered Item</li>
      </ul>

      <dl class="cw-list cw-list-horizontal">
          <dt>Term</dt>
          <dd>Definition</dd>
          <dt>Term</dt>
          <dd>Definition</dd>
      </dl>

  Example
  1. Ordered Item
  2. Ordered Item
  3. Ordered Item
  - Unordered Item
  - Unordered Item
  - Unordered Item
  Term
    Definition
  Term
    Definition

- ## `dl.cw-list-dictionary`

  Note: Currently implemented using `dl` only

  Code

      <dl class="cw-list cw-list-dictionary">
          <dt>Term</dt>
          <dd>Definition</dd>
          <dt>Term</dt>
          <dd>Definition</dd>
      </dl>

  Example
  Term
    Definition
  Term
    Definition