Critical CSS

Use the a element.

link

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

Use the button classes on <a>, <button> and <input> elements.

<button>Default Button</button>
<button class="button-primary">Primary Button</button>
<button class="button-secondary">Secondary Button</button>

Use the h1 - h6 elements or classes.

h1

h2

h3

h4

h5

h6
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

.h1

.h2

.h3

.h4

.h5

.h6

<p class="h1">.h1</p>
<p class="h2">.h2</p>
<p class="h3">.h3</p>
<p class="h4">.h4</p>
<p class="h5">.h5</p>
<p class="h6">.h6</p>

Use the img element with the optional img-responsive class.

Sample image
<img src="sample.jpg" alt="Sample image" class="img-responsive">

Set of classes to create the card design pattern.

Card

card-title

Sample paragraph

<div class="card">
  <div class="card-heading">
    <h1>Card</h1>
  </div>
  <div class="card-body">
    <h1 class="card-title">card-title</h1>
    <p>Sample paragraph</p>
  </div>
  <div class="card-footer">
    <p>Card footer</p>
  </div>
</div>

Card Primary

card-title

Sample paragraph

<div class="card card-primary">
  <div class="card-heading">
    <h1>Card Primary</h1>
  </div>
  <div class="card-body">
    <h1 class="card-title">card-title</h1>
    <p>Sample paragraph</p>
  </div>
  <div class="card-footer">
    <p>Card footer</p>
  </div>
</div>