Skip to main content

Patterns

Content

The Content Object is a wrapper class to style elements that can't easily be marked up individually with element classnames. This is mostly for content formatted and displayed from a WYSIWYG editor. To use it, add the .o-content class to the parent element of the content being encased. Currently it only includes definitions for tables and lists.

  • Checklist item Application
  • Checklist item Badge
  • Checklist item Flag
  • Checklist item Calendar
  • Checklist item Generic
  • Checklist item Eligibility Check (default)
    • Nested checklist item
    • Nested checklist item
    • Nested checklist item
Family Size Yearly Income Weekly Income
1 $27,816 $535
2 $36,372 $699
3 $44,928 $864
4 $53,484 $1,029
... ... ... 
<div class="o-content">
  <ul>
    <li class="c-checklist__item-application">Checklist item Application</li>
    <li class="c-checklist__item-badge">Checklist item Badge</li>
    <li class="c-checklist__item-flag">Checklist item Flag</li>
    <li class="c-checklist__item-calendar">Checklist item Calendar</li>
    <li class="c-checklist__item-generic">Checklist item Generic</li>
    <li>Checklist item Eligibility Check (default)<ul>
        <li>Nested checklist item</li>
        <li>Nested checklist item</li>
        <li>Nested checklist item</li>
      </ul>
    </li>
  </ul>
  <table>
    <thead>
      <tr>
        <td><strong>Family Size</strong></td>
        <td><strong>Yearly Income</strong></td>
        <td><strong>Weekly Income</strong></td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>$27,816</td>
        <td>$535</td>
      </tr>
      <tr>
        <td>2</td>
        <td>$36,372</td>
        <td>$699</td>
      </tr>
      <tr>
        <td>3</td>
        <td>$44,928</td>
        <td>$864</td>
      </tr>
      <tr>
        <td>4</td>
        <td>$53,484</td>
        <td>$1,029</td>
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>