Project Name

Typography

<p class="small">Lorem ipsum dolor sit amet enim.</p>

<p class="base">Lorem ipsum dolor sit amet enim.</p>

<p class="medium">Lorem ipsum dolor sit amet enim.</p>

<p class="large">Lorem ipsum dolor sit amet enim.</p>

<p class="xlarge">Lorem ipsum dolor sit amet enim.</p>

<p class="xxlarge">Lorem ipsum dolor sit amet enim.</p>

<p class="huge">Lorem ipsum dolor sit amet enim.</p>

Buttons

Types

<a href="#" class="btn btn-link">Link</a>
<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-success">Success</a>
<a href="#" class="btn btn-info">Info</a>
<a href="#" class="btn btn-warning">Warning</a>
<a href="#" class="btn btn-danger">Danger</a>

Sizes

<a href="#" class="btn btn-link btn-large">Large</a>
<a href="#" class="btn btn-link">Medium</a>
<a href="#" class="btn btn-link btn-small">Small</a>

Lists

Ordered

1. Lorem ipsum dolor sit amet enim.
2. Etiam ullamcorper.
3. Suspendisse a pellentesque dui, non felis.
4. Maecenas malesuada elit lectus felis, malesuada ultricies.
5. Curabitur et ligula.

<ol class="ordered-list">
  <li>Lorem ipsum dolor sit amet enim.</li>
  <li>Etiam ullamcorper.</li>
  <li>Suspendisse a pellentesque dui, non felis.</li>
  <li>Maecenas malesuada elit lectus felis, malesuada ultricies.</li>
  <li>Curabitur et ligula.</li>
</ol>

Unstyled

• Lorem ipsum dolor sit amet enim.
• Etiam ullamcorper.
• Suspendisse a pellentesque dui, non felis.
• Maecenas malesuada elit lectus felis, malesuada ultricies.
• Curabitur et ligula.

<ul class="unordered-list">
  <li>Lorem ipsum dolor sit amet enim.</li>
  <li>Etiam ullamcorper.</li>
  <li>Suspendisse a pellentesque dui, non felis.</li>
  <li>Maecenas malesuada elit lectus felis, malesuada ultricies.</li>
  <li>Curabitur et ligula.</li>
</ul>

Inline

• Lorem
• ipsum
• dolor
• sit
• amet
• enim.

<ul class="inline-list">
  <li>Lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
  <li>enim.</li>
</ul>

Icons

• i-marker
• i-magnifier
• i-basket
• i-envelop
• i-calendar
• i-people

<em class="icon i-name"></em>

Inputs