A full article with heading, lead and body text
A full article with heading, lead and body text
Nulla et libero fermentum nisl tempor suscipit quis quis lacus. Sed lacus nisi, condimentum eget sem at, euismod vestibulum quam.
Integer dignissim, augue ac ornare viverra, nulla neque tincidunt ipsum, ac vulputate turpis eros scelerisque dolor. Integer at turpis quam.
Phasellus auctor malesuada diam, ac tincidunt neque venenatis eu. Nulla sit amet erat eleifend magna tincidunt faucibus at in lorem. Quisque nisi felis, vulputate non nibh a, euismod posuere ante. Morbi nec purus sed magna sollicitudin aliquet. Aliquam pulvinar sem at sagittis ullamcorper.
Maecenas bibendum suscipit ante, at pretium risus aliquet vel. Aenean efficitur diam et dui aliquam, eu scelerisque elit luctus. Praesent luctus varius felis sit amet tincidunt. In pharetra mattis tempus. Nullam bibendum id nisi hendrerit condimentum.
<article>
<h1>Lorem ipsum</h1>
<p class="lead">Nulla et libero fermentum nisl tempor suscipit quis quis lacus. Sed lacus nisi, condimentum eget sem at, euismod vestibulum quam.</p>
<p>Integer dignissim, augue ac ornare viverra, nulla neque tincidunt ipsum, ac vulputate turpis eros scelerisque dolor. Integer at turpis quam.</p>
<p>Phasellus auctor malesuada diam, ac tincidunt neque venenatis eu. <a href="#">Nulla sit amet</a> erat eleifend magna tincidunt faucibus at in lorem. Quisque nisi felis, vulputate non nibh a, euismod posuere ante. Morbi nec purus sed magna sollicitudin aliquet. Aliquam pulvinar sem at sagittis ullamcorper.</p>
<p>Maecenas bibendum suscipit ante, at pretium risus aliquet vel. Aenean efficitur diam et dui aliquam, eu scelerisque elit luctus. Praesent luctus varius felis sit amet tincidunt. In pharetra mattis tempus. Nullam bibendum id nisi hendrerit condimentum.</p>
</article>Headings for use within articles and more. Please always set the id attribute on headings to enable anchor-linking.
.text-highlight - Will highlight any heading in the current theme color
.underline - Underlines the heading
<h1 id="anchor-1">Heading 1</h1>
<h2 id="anchor-2">Heading 2</h2>
<h3 id="anchor-3">Heading 3</h3>
<h4 id="anchor-4">Heading 4</h4>
<h5 id="anchor-5">Heading 5</h5>
<h6 id="anchor-6">Heading 6</h6>Label a text with a filled background
.label-sm - Smaller label
.label-lg - Larger label
.label-theme - Uses the current theme color
.label-red-1 - First color in red stripe (color 1-5 available)
.label-blue-1 - First color in blue stripe (color 1-5 available)
.label-green-1 - First color in green stripe (color 1-5 available)
.label-purple-1 - First color in purple stripe (color 1-5 available)
One of the words in this sentence is <span class="label label-red-2">labelled</span>.A large paragraph to use as article lead.
Nulla et libero fermentum nisl tempor suscipit quis quis lacus. Sed lacus nisi, condimentum eget sem at, euismod vestibulum quam.
<p class="lead">Nulla et libero fermentum nisl tempor suscipit quis quis lacus. Sed lacus nisi, condimentum eget sem at, euismod vestibulum quam.</p>Stanrdard unordered list.
.unordered-list - Applies the style to lists used outside article. There's no need to apply this class when using ul inside an article
<ul class="unordered-list">
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</ul>Stanrdard ordered list.
<ol class="ordered-list">
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</ol>Aligns text.
<div class="text-left">Left aligned text</div>
<div class="text-center">Center aligned text</div>
<div class="text-right">Right aligned text</div>
<div class="text-justify">Justified text</div>Font size
.text-sm - Small
.text-md - Medium (default)
.text-lg - Large
.text-xl - Extra Large
<div class="text-left">Left aligned text</div>Highlights text.
<span class="text-highlight">Highlighted</span>Underlines text.
<span class="text-underline">Underlined</span>Mark text to make it stand out.
.mark-yellow - Mark with yellow color
.mark-blue - Mark with blue color
.mark-green - Mark with green color
.mark-red - Mark with red color
.mark-purple - Mark with purple color
One of the words in this sentence is <mark>marked</mark>.<br>
One of the words in this sentence is <mark class="mark-yellow">marked</mark>.<br>
One of the words in this sentence is <mark class="mark-blue">marked</mark>.<br>
One of the words in this sentence is <mark class="mark-green">marked</mark>.<br>
One of the words in this sentence is <mark class="mark-red">marked</mark>.<br>
One of the words in this sentence is <mark class="mark-purple">marked</mark>.Small text. Can be used with the <small> element or by applying the .small class to any element.
<small>This is a small text</small>