Github Project - Version 2.5.0
Created & Maintained by Gary Hepting

Typography

Headings, paragraphs, emphasizers, links, lists, web fonts, quotes, code, and colors

Component Usage Example 3 of 14

Headings

Heading 1

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Heading 2

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Heading 3

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

<h1>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</h1>
<h2>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</h2>
<h3>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</h3>

Heading 4

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Heading 5

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Heading 6

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
<h4>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</h4>
<h5>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</h5>
<h6>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</h6>

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Normal Hyperlink

<a href="home.html">Normal Hyperlink</a>

Anchor Link

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

Secure Link

<a href="https://google.com">Secure Link</a>

New Window Link

<a href="http://google.com" target="_blank">New Window Link</a>

View Source Link

<a href="view-source:http://google.com">View Source Link</a>

Image Link

<a href="example.gif">Image Link</a>

PDF Document Link

<a href="example.pdf">PDF Document Link</a>

Word Document Link

<a href="example.doc">Word Document Link</a>

Text Document Link

<a href="example.txt">Text Document Link</a>

Markdown Document Link

<a href="example.md">Markdown Document Link</a>

ZIP File Link

<a href="example.zip">ZIP File Link</a>

Executable File Link

<a href="example.exe">Executable File Link</a>

Home Link

<a href="home.html" rel="home">Home Link</a>

<a href="#" rel="search">Search Link</a>

<a href="#" rel="author">Author Link</a>

Help Link

<a href="#" rel="help">Help Link</a>

<a href="#" rel="tag">Tag Link</a>

Bookmark Link

<a href="#" rel="bookmark">Bookmark Link</a>

<a href="#" rel="prev">Previous Link</a>

<a href="#" rel="next">Next Link</a>

Directory Link

<a href="#" rel="directory">Directory Link</a>

Payment Link

<a href="#" rel="payment">Payment Link</a>

Email Link

<a href="mailto:user@example.com">Email Link</a>

Telephone Link

<a href="tel:5555551212">Telephone Link</a>

Gmail Link

<a href="mailto:user@gmail.com">Gmail Link</a>

Skype Link

<a href="skype:skypeusername">Skype Link</a>

RSS Link

<a href="example.rss">RSS Link</a>

Twitter Link

<a href="twitter.com">Twitter Link</a>

Facebook Link

<a href="facebook.com">Facebook Link</a>

Tumblr Link

<a href="http://tumblr.com">Tumblr Link</a>

LinkedIn Link

<a href="http://linkedin.com">LinkedIn Link</a>

Google Plus Link

<a href="http://plus.google.com">Google Plus Link</a>

Youtube Link

<a href="http://youtube.com">Youtube Link</a>

Github Link

<a href="http://github.com">Github Link</a>

Stack Overflow Link

<a href="http://stackoverflow.com">Stack Overflow Link</a>

Instagram Link

<a href="http://instagram.com">Instagram Link</a>

Flickr Link

<a href="http://flickr.com">Flickr Link</a>

Foursquare Link

<a href="http://foursquare.com">Foursquare Link</a>

Dribbble Link

<a href="http://dribbble.com">Dribbble Link</a>

Dropbox Link

<a href="http://dropbox.com">Dropbox Link</a>

Trello Link

<a href="http://trello.com">Trello Link</a>

Emphasizers & Modifiers

Paragraph with superscript

Paragraph with subscript

Paragraph with small text

Paragraph with large text 

<p>Paragraph with <sup>superscript</sup></p>
<p>Paragraph with <sub>subscript</sub></p>
<p>Paragraph with <small>small text</small></p>
<p>Paragraph with <big>large text</big></p>

Paragraph with emphasized text

Paragraph with bold text

Paragraph with deleted text

Paragraph with abbr text

<p>Paragraph with <em>emphasized text</em></p>
<p>Paragraph with <b>bold text</b></p>
<p>Paragraph with <del>deleted text</del></p>
<p>Paragraph with <abbr title="Abreviated">abbr</abbr> text</p>

Unordered Lists

  • Unstyled list item 1
  • Unstyled list item 2
  • Normal list item 1
  • Normal list item 2
  • Styled list item 1
  • Styled list item 2
<ul class="unstyled">
  <li>Unstyled list item 1</li>
  <li>Unstyled list item 2</li>
</ul>
<ul>
  <li>Normal list item 1</li>
  <li>Normal list item 2</li>
</ul>
<ul class="list">
  <li>Styled list item 1</li>
  <li>Styled list item 2</li>
</ul>

Ordered Lists

  1. Unstyled ordered list item 1
  2. Unstyled ordered list item 2
  1. Ordered list item 1
  2. Ordered list item 2
  1. Styled ordered list item 1
  2. Styled ordered list item 2
<ol class="unstyled">
  <li>Unstyled ordered list item 1</li>
  <li>Unstyled ordered list item 2</li>
</ol>
<ol>
  <li>Ordered list item 1</li>
  <li>Ordered list item 2</li>
</ol>
<ol class="list">
  <li>Styled ordered list item 1</li>
  <li>Styled ordered list item 2</li>
</ol>

Checklists

Normal Checklist

  • Checklist item
  • Completed checklist item
  • Checklist item
  • Checklist item

Large, Colored Checklist

  • Checklist item
  • Completed checklist item
  • Checklist item
  • Checklist item

Individually Colored Checklist Items

  • Blue checklist item
  • Completed red checklist item
  • Purple checklist item
  • Turquoise checklist item
<ul class="checklist">
  <li>Checklist item</li>
  <li aria-checked="true">Completed checklist item</li>
  <li>Checklist item</li>
  <li>Checklist item</li>
</ul>
<ul class="checklist large turquoise">
  <li>Checklist item</li>
  <li aria-checked="true">Completed checklist item</li>
  <li>Checklist item</li>
  <li>Checklist item</li>
</ul>
<ul class="checklist">
  <li class="blue">Blue checklist item</li>
  <li aria-checked="true" class="red">Completed red checklist item</li>
  <li class="purple">Purple checklist item</li>
  <li class="turquoise">Turquoise checklist item</li>
</ul>

Web Fonts

Source Sans Pro

Museo Slab

Quicksand

<h1 class="source-sans-pro">Source Sans Pro</h1>
<h1 class="museo-slab">Museo Slab</h1>
<h1 class="quicksand">Quicksand</h1>

Quotations

This is a sentence with an inline quote nested within it. 

<p>This is a sentence with an <q>inline quote</q> nested within it.</p>

Block Quotations & Cites

A computer once beat me at chess, but it was no match for me at kick boxing. Emo Phillips 

<blockquote>
  A computer once beat me at chess, but it was no match for me at kick boxing.
  <cite>Emo Phillips</cite>
</blockquote>

Code Snippets

This is some text with some inline code

<p>This is some text with some <code>inline code</code></p>

Preformatted Code Blocks

%code {
  @extend %inline-block, %monospace;
  &.block {
    @extend %block;
  }
  background: darken($background-color, 10%);
  padding: 0 0.3em;
  margin: 0 0.2em;
  font-weight: normal;
  line-height: inherit;
}

<code class="block">
  <pre>%code {
  @extend %inline-block, %monospace;
  &.block {
    @extend %block;
  }
  background: darken($background-color, 10%);
  padding: 0 0.3em;
  margin: 0 0.2em;
  font-weight: normal;
  line-height: inherit;
}</pre>
</code>

Colors & States

.yellow
.orange
.red
.pink
.purple
.asphalt
.blue
.turquoise
.green
.charcoal

.info
.alert
.warning
.error
.success
.question

  • .yellow list item
  • .orange list item
  • .red list item
  • .pink list item
  • .purple list item
  • .asphalt list item
  • .blue list item
  • .turquoise list item
  • .green list item
  • .charcoal list item
  • .info list item
  • .alert list item
  • .warning list item
  • .error list item
  • .success list item
  • .question list item
  1. .yellow ordered list item
  2. .orange ordered list item
  3. .red ordered list item
  4. .pink ordered list item
  5. .purple ordered list item
  6. .asphalt ordered list item
  7. .blue ordered list item
  8. .turquoise ordered list item
  9. .green ordered list item
  10. .charcoal ordered list item
  1. .info ordered list item
  2. .alert ordered list item
  3. .warning ordered list item
  4. .error ordered list item
  5. .success ordered list item
  6. .question ordered list item

Background Colors

.yellow-bg

.orange-bg

.red-bg

.pink-bg

.purple-bg

.asphalt-bg

.blue-bg

.turquoise-bg

.green-bg

.charcoal-bg

.info-bg

.alert-bg

.warning-bg

.error-bg

.success-bg

.question-bg