Content

Typography

<a href="#">Link</a>

Headings

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Horizontal Rule hr

<p>Hey!</p>
<hr />

Colour text

Just add class COLOUR-NAME-text.

<p>
  <span class="canvas-text">Canvas</span>
  <span class="primary-text">Primary</span>
  <span class="secondary-text">Secondary</span>
  <span class="tertiary-text">Tertiary</span>
  <span class="success-text">Success</span>
  <span class="danger-text">Danger</span>
  <span class="warning-text">Warning</span>
  <span class="info-text">Info</span>
</p>

Small and big font size

Just add small and big classes.

<span class="big">Big</span>
<span class="small">Small</span>

Table

<div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Heading</th>
          <th scope="col">Heading</th>
          <th scope="col">Heading</th>
          <th scope="col">Heading</th>
          <th scope="col">Heading</th>
          <th scope="col">Heading</th>
          <th scope="col">Heading</th>
          <th scope="col">Heading</th>
          <th scope="col">Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
        </tr>
      </tbody>
    </table>
  </div>
      </tbody>
    </table>
  </div>

Close button

<button class="close"><span class="close-sb-icon"></span></button>

Pre

Responsive by overflow auto.

<pre>
<code><span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"responsive"</span><span class="nt">&gt;</span><span class="nt">&lt;li&gt;</span>Item<span class="nt">&lt;/li&gt;</span><span class="nt">&lt;li&gt;</span>Item<span class="nt">&lt;/li&gt;</span><span class="nt">&lt;/ol&gt;</span><span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"responsive"</span><span class="nt">&gt;</span><span class="nt">&lt;li&gt;</span>Item<span class="nt">&lt;/li&gt;</span><span class="nt">&lt;li&gt;</span>Item<span class="nt">&lt;/li&gt;</span><span class="nt">&lt;/ol&gt;</span><span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"responsive"</span><span class="nt">&gt;</span><span class="nt">&lt;li&gt;</span>Item<span class="nt">&lt;/li&gt;</span><span class="nt">&lt;li&gt;</span>Item<span class="nt">&lt;/li&gt;</span><span class="nt">&lt;/ol&gt;</span></code>
</pre>