<section>
<table>
  <thead>
    <th>Font Family</th>
    <th>Variable</th>
    <th>Value</th>
    <th>Usage</th>
  </thead>
<tbody>
<tr>
<td><b>Lato Bold</b></td>
<td><span class="citation">@header-font</span></td>
<td>font-family: ‘Lato’, sans-serif</td>
<td>Headings</td>
</tr>
<tr>
<td>Lato</td>
<td><span class="citation">@body-font</span></td>
<td>font-family: ‘Lato’, sans-serif</td>
<td>Body</td>
</tr>
</tbody>
</table>
<p>ExpressUI uses Lato for both headings and body text. It should be specified otherwise when headings and body fonts differ. ExpressUI automatically imports Lato via Google Fonts</p>

<h4>Headings</h4>
<%= render "express_ui/atoms/headings" %>

<h4>Icons</h4>
<%= render "express_ui/atoms/icons" %>

<h4>Inline and Block Elements</h4>

<p>Assign margin and padding to headers to make sure they are spaced well against other elements</p>

<table>
  <thead>
    <th>Element</th>
    <th>Demo</th>
    <th>Notes</th>
  </thead>
  <tbody>
    <tr>
      <td><code>&lt;p&gt;&lt;/p&gt;</code></td>
      <td><p>A paragraph (from the Greek paragraphos, &quot;to write beside&quot; or &quot;written beside&quot;) is a self-contained unit of a discourse in writing dealing with a particular point or idea. </p>
      <td>Wraps block elements</td>
    </tr>

    <tr>
      <td><code>&lt;a href="#" title=""&gt;&lt;/a&gt;</code></td>
      <td><a href="#" title="Describe where the link is taking the user">This is a text link</a></td>
      <td>Always add a descriptive <code>title</code> attribute to links</td>
    </tr>

    <tr>
      <td><code>&lt;strong&gt;&lt;/strong&gt;</code></td>
      <td><strong>I'm very important</strong></td>
      <td>Strong is used to indicate strong importance</td>
    </tr>

    <tr>
      <td><code>&lt;em&gt;&lt;/em&gt;</code></td>
      <td><em>I'm slightly important</em></td>
      <td>Add emphasis</td>
    </tr>

    <tr>
      <td><code>&lt;i&gt;&lt;/i&gt;</code></td>
      <td><i>icon</i></td>
      <td>For font icons</td>
    </tr>

    <tr>
      <td><code>&lt;sup&gt;&lt;/sup&gt;</code></td>
      <td>Rotate the image by 90<sup>º</sup></td>
      <td>Slightly elevate text above the normal line</td>
    </tr>

    <tr>
      <td><code>&lt;small&gt;&lt;/small&gt;</code></td>
      <td><small>Terms and conditions apply</small></td>
      <td>For fine print</td>
    </tr>

    <tr>
      <td><code>&lt;code&gt;&lt;/code&gt;</code></td>
      <td>&lt;html&gt;&lt;/html&gt;</td>
      <td>For inline code</td>
    </tr>

    </tbody>
</table>

<p>See list of deprecated tags at <a href="https://www.codehelp.co.uk/html/deprecated.html" title="Deprecated tags"> https://www.codehelp.co.uk/html/deprecated.html </a></p>

<h4>Status</h4>
<p>Status labels can be used to denote the state of an item or page, e.g., when an item has incurred a “cancelled” or “successful” state.</p>
<p>The <code>.ae-status</code> class is required.</p>
<table>
<thead>
<tr>
<th>Class</th>
<th>Demo</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.ae-status-success</code></td>
<td><span class="ae-status ae-status-success">Success</span>
</td>
<td>Finished, done, successful, correct,</td>
</tr>
<tr>
<td><code>.ae-status-cancelled</code> or <code>.ae-status-error</code></td>
<td><span class="ae-status ae-status-cancelled">Cancelled</span></td>
<td>Cancelled, alert</td>
</tr>
<tr>
<td><code>.ae-status-pending</code></td>
<td><span class="ae-status ae-status-pending">Pending</span></td>
<td>Pending, ongoing, reminder, warning</td>
</tr>
<tr>
<td><code>.ae-status-deleted</code></td>
<td><span class="ae-status ae-status-deleted">Deleted</span></td>
<td>Deleted, removed</td>
</tr>
</tbody>
</table>

<p>Use badges to indicate the number of items for a specific notification or link.</p>
<p>The <code>.ae-badge</code> class is required.</p>

<table>
<thead>
<tr>
<th>Class</th>
<th>Demo</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.ae-badge-success</code></td>
<td><span class="ae-badge ae-badge-success">1</span>
</td>
</tr>
<tr>
<td><code>.ae-badge-cancelled</code> or <code>.ae-badge-error</code></td>
<td><span class="ae-badge ae-badge-cancelled">10</span>
</td>
</tr>
<tr>
<td><code>.ae-badge-pending</code></td>
<td><span class="ae-badge ae-badge-pending">100</span>
</td>
</tr>
<tr>
<td><code>.ae-badge-deleted</code></td>
<td><span class="ae-badge ae-badge-deleted">1000</span>
</td>
</tr>
</tbody>
</table>


<h4>Text Utilities</h4>
<table>
<thead>
<tr>
<th>Class</th>
<th>Value</th>
</thead>
<tbody>
<tr>
<td><code>.ae-u-text-left</code></td>
<td>text-align: left</td>
</tr>
<tr>
<td><code>.ae-u-text-center</code></td>
<td>text-align: center</td>
</tr>
<tr>
<td><code>.ae-u-text-right</code></td>
<td>text-align: right</td>
</tr>
<tr>
<td><code>.ae-u-text-justify</code></td>
<td>text-align: justify</td>
</tr>
<tr>
<td><code>.ae-u-float-left</code></td>
<td>float: left</td>
</tr>
<tr>
<td><code>.ae-u-float-right</code></td>
<td>float: right</td>
</tr>
</tbody>
</table>
</section>