.h1, h1, Heading 1

.h2, h2, Heading 2

.h3, h3, Heading 3

.h4, h4, Heading 4

.h5, h5, Heading 5

.h6, h6, Heading 6

<h1>Heading 1</h1>, <span class="h1">Heading 1</span>
<h2>Heading 2</h2>, <span class="h2">Heading 1</span>
<h3>Heading 3</h3>, <span class="h3">Heading 1</span>
<h4>Heading 4</h4>, <span class="h4">Heading 1</span>
<h5>Heading 5</h5>, <span class="h5">Heading 1</span>
<h6>Heading 6</h6>, <span class="h6">Heading 1</span>

.h1, h1, Heading 1 Secondary text

.h2, h2, Heading 2 Secondary text

.h3, h3, Heading 3 Secondary text

.h4, h4, Heading 4 Secondary text

.h5, h5, Heading 5 Secondary text

.h6, h6, Heading 6 Secondary text

<h1>Heading 1 <small>Secondary text</small></h1>
<h2>Heading 2 <small>Secondary text</small></h2>
<h3>Heading 3 <small>Secondary text</small></h3>
<h4>Heading 4 <small>Secondary text</small></h4>
<h5>Heading 5 <small>Secondary text</small></h5>
<h6>Heading 6 <small>Secondary text</small></h6>

Body copy

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Lead body copy

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

Custom Font

Etiam condimentum ultrices est, eu dapibus magna mollis at. Donec sit amet sem ut ex gravida scelerisque at in nulla. Nulla rhoncus tortor id risus tempus egestas. Pellentesque libero diam, venenatis ac magna a, pretium blandit tortor. Vestibulum in vulputate eros.

<span class="eds_customFont">Etiam condimentum ultrices est, eu dapibus magna mollis at. Donec sit amet sem ut ex gravida scelerisque at in nulla. Nulla rhoncus tortor id risus tempus egestas. Pellentesque libero diam, venenatis ac magna a, pretium blandit tortor. Vestibulum in vulputate eros.</span>

Font sizes

Larger Text

<p class="eds_largerText">Larger Text</p>

Large Text

<p class="eds_largeText">Large Text</p>

Extra Large Text

<p class="eds_extraLargeText">Extra Large Text</p>

Light text

Nulla luctus maximus fermentum. Quisque vel enim in velit tempus scelerisque nec id tellus. Vivamus turpis lectus, mollis eleifend nibh ac, condimentum eleifend nunc. Aenean bibendum risus orci, sed tempus nisl faucibus vitae. Aliquam aliquet lectus vitae lectus porttitor, sed dapibus dolor cursus. Quisque efficitur id quam in consequat. Suspendisse vehicula sollicitudin neque eu tristique.

<p class="eds_lightText">Nulla luctus maximus fermentum. Quisque vel enim in velit tempus scelerisque nec id tellus. Vivamus turpis lectus, mollis eleifend nibh ac, condimentum eleifend nunc. Aenean bibendum risus orci, sed tempus nisl faucibus vitae. Aliquam aliquet lectus vitae lectus porttitor, sed dapibus dolor cursus. Quisque efficitur id quam in consequat. Suspendisse vehicula sollicitudin neque eu tristique. </p>

Inline text elements

Marked text

You can use the mark tag to highlight text.

You can use the mark tag to <mark>highlight</mark> text.

Deleted text

This line of text is meant to be treated as deleted text.

<del>This line of text is meant to be treated as deleted text.</del>

Strikethrough text

This line of text is meant to be treated as no longer accurate.

<s>This line of text is meant to be treated as no longer accurate.</s>

Inserted text

This line of text is meant to be treated as an addition to the document.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

Underlined text

This line of text will render as underlined

<u>This line of text will render as underlined</u>

Small text

This line of text is meant to be treated as fine print.

This line of text is meant to be treated as fine print.

<small>This line of text is meant to be treated as fine print.</small>

<span class="small">This line of text is meant to be treated as fine print.</span>

Bold

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

Italics

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

Alignment classes

Left aligned text. Etiam ac blandit ante. Cras semper vulputate lacus, et semper tortor eleifend ac. Sed in consequat orci, eu posuere metus. Quisque cursus, nulla sed placerat accumsan, velit leo cursus justo, non dictum sem tortor in mi. Quisque lacinia orci sed nisl pharetra iaculis. Quisque odio quam, laoreet eu ligula ut, venenatis congue arcu. Sed ullamcorper dolor eget luctus malesuada. In nisl nisi, cursus in elit lobortis, euismod suscipit dolor. Nulla condimentum sit amet lorem ac lobortis. Nulla semper egestas massa. Sed fringilla urna consequat tortor auctor, vitae volutpat neque sagittis. Nunc molestie tempus euismod. Praesent mollis consectetur leo, ullamcorper auctor tellus ullamcorper a.

Center aligned text. Suspendisse potenti. Mauris leo neque, ullamcorper luctus metus vel, ultricies hendrerit diam. Phasellus justo orci, aliquet eu mi quis, commodo viverra enim. Vivamus hendrerit, dolor ac adipiscing porta, nunc felis mollis sapien, non interdum erat sapien et eros. Integer commodo mauris ut diam varius, nec auctor elit consectetur. Donec sed congue tellus. Sed laoreet sodales erat quis scelerisque. Etiam sed erat rutrum diam elementum pretium. Donec ac sapien pharetra sapien ultricies sollicitudin vitae quis felis. Nunc feugiat dui quis nibh congue imperdiet. Nam sed enim sodales, sollicitudin lorem in, fringilla lectus.

Right aligned text. Duis sit amet ipsum quam. Aenean id purus neque. Ut id urna ligula. Aliquam volutpat ac nisi nec semper. Etiam suscipit neque eros, ac dapibus arcu accumsan in. Quisque vitae libero fringilla, molestie leo a, placerat nunc. Integer et faucibus est. Ut id ullamcorper eros. Suspendisse at posuere velit. Cras ac feugiat velit, non mollis velit. Curabitur tristique nulla nec magna dignissim, id hendrerit ligula lobortis. Donec eleifend eros lectus, sit amet scelerisque tortor vehicula in.

Justified text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc posuere nec turpis et scelerisque. Maecenas commodo volutpat tincidunt. Integer convallis viverra quam in condimentum. Ut id malesuada nunc. Nunc consequat orci ac tellus pretium, non pharetra nisl consectetur. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla imperdiet non leo at lobortis. Cras commodo tortor pulvinar imperdiet euismod. Morbi eu laoreet metus. Donec sit amet commodo nibh, non ullamcorper massa. Quisque lobortis tincidunt sem, a interdum mi ullamcorper in.

No wrap text. Phasellus id nunc faucibus, faucibus orci eget, molestie elit. Sed eu ante lectus. Nullam et viverra ante. Ut vel consequat orci, et tempus metus. Integer vulputate nisl cursus risus pretium, non posuere dui auctor. Vestibulum bibendum scelerisque leo, et ultricies velit viverra vel. Cras consectetur, neque vel auctor consectetur, turpis nunc sodales ante, eu rutrum mauris lacus at nunc. Etiam ut malesuada sem. Aenean vel rutrum risus. Mauris vitae turpis in nunc cursus convallis.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Transformation classes

Lowercased text.

Uppercased text.

Capitalized text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Abbreviations

Basic abbreviation

An abbreviation of the word attribute is attr.

<abbr title="attribute">attr</abbr>

Initialism

HTML is the best thing since sliced bread.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Addresses

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Full Name
first.last@example.com

<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>

Blockquotes

Default blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Blockquote options

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote class="blockquote-reverse">
...
</blockquote>

Page header

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Main title

<div class="eds_mainTitle">
<h2>Nullam sed tortor sed sem varius</h2>
<p>Nam consequat est sed nibh gravida, eget congue dolor vestibulum.</p>
</div>