Github Project - Version 2.5.0
Created & Maintained by Gary Hepting
Headings, paragraphs, emphasizers, links, lists, web fonts, quotes, code, and colors
Component Usage Example 3 of 14
Heading 1
Heading 2
Heading 3
<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
Heading 5
Heading 6
<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>
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>
<a href="home.html">Normal Hyperlink</a>
<a href="#">Anchor Link</a>
<a href="https://google.com">Secure Link</a>
<a href="http://google.com" target="_blank">New Window Link</a>
<a href="view-source:http://google.com">View Source Link</a>
<a href="example.gif">Image Link</a>
<a href="example.pdf">PDF Document Link</a>
<a href="example.doc">Word Document Link</a>
<a href="example.txt">Text Document Link</a>
<a href="example.md">Markdown Document Link</a>
<a href="example.zip">ZIP File Link</a>
<a href="example.exe">Executable File Link</a>
<a href="home.html" rel="home">Home Link</a>
<a href="#" rel="search">Search Link</a>
<a href="#" rel="author">Author Link</a>
<a href="#" rel="help">Help Link</a>
<a href="#" rel="tag">Tag Link</a>
<a href="#" rel="bookmark">Bookmark Link</a>
<a href="#" rel="prev">Previous Link</a>
<a href="#" rel="next">Next Link</a>
<a href="#" rel="directory">Directory Link</a>
<a href="#" rel="payment">Payment Link</a>
<a href="mailto:user@example.com">Email Link</a>
<a href="tel:5555551212">Telephone Link</a>
<a href="mailto:user@gmail.com">Gmail Link</a>
<a href="skype:skypeusername">Skype Link</a>
<a href="example.rss">RSS Link</a>
<a href="twitter.com">Twitter Link</a>
<a href="facebook.com">Facebook Link</a>
<a href="http://tumblr.com">Tumblr Link</a>
<a href="http://linkedin.com">LinkedIn Link</a>
<a href="http://plus.google.com">Google Plus Link</a>
<a href="http://youtube.com">Youtube Link</a>
<a href="http://github.com">Github Link</a>
<a href="http://stackoverflow.com">Stack Overflow Link</a>
<a href="http://instagram.com">Instagram Link</a>
<a href="http://flickr.com">Flickr Link</a>
<a href="http://foursquare.com">Foursquare Link</a>
<a href="http://dribbble.com">Dribbble Link</a>
<a href="http://dropbox.com">Dropbox Link</a>
<a href="http://trello.com">Trello Link</a>
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>
<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>
<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>
Normal Checklist
Large, Colored Checklist
Individually Colored Checklist Items
<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>
<h1 class="source-sans-pro">Source Sans Pro</h1>
<h1 class="museo-slab">Museo Slab</h1>
<h1 class="quicksand">Quicksand</h1>
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>
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>
This is some text with some inline code
<p>This is some text with some <code>inline code</code></p>
%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>
.yellow
.orange
.red
.pink
.purple
.asphalt
.blue
.turquoise
.green
.charcoal
.info
.alert
.warning
.error
.success
.question
.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