Headings & Text

Headings

HTML headings <h2> through <h6> are available for use in content (<h1> is reserved for the title of the page). Remember to use headings sequentially without skipping a level. An <h2> is always followed by an <h2> or <h3>, and an <h3> is followed by an <h3> or <h4>, etc. For most content, <h4>-<h6>s aren’t necessary, but they are included for rare instances.

H2 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quamquam te quidem video minime esse deterritum. Cum autem venissemus in Academiae non sine causa nobilitata spatia, solitudo erat ea, quam volueramus.

H3 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quamquam te quidem video minime esse deterritum. Cum autem venissemus in Academiae non sine causa nobilitata spatia, solitudo erat ea, quam volueramus.

H4 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quamquam te quidem video minime esse deterritum. Cum autem venissemus in Academiae non sine causa nobilitata spatia, solitudo erat ea, quam volueramus.

H5 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quamquam te quidem video minime esse deterritum. Cum autem venissemus in Academiae non sine causa nobilitata spatia, solitudo erat ea, quam volueramus.

H6 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quamquam te quidem video minime esse deterritum. Cum autem venissemus in Academiae non sine causa nobilitata spatia, solitudo erat ea, quam volueramus.

<h2>H2 Heading</h2>
<!-- <p>Lorem ipsum...</p>-->
<h3>H3 Heading</h3>
<!-- <p>Lorem ipsum...</p>-->
<h4>H4 Heading</h4>
<!-- <p>Lorem ipsum...</p>-->
<h5>H5 Heading</h5>
<!-- <p>Lorem ipsum...</p>-->
<h6>H6 Heading</h6>
<!-- <p>Lorem ipsum...</p>-->

Additional .h1 through .h6 classes are also available for matching the styling of a heading when using a different HTML element.

Second-Level Heading

<!-- It's semantically a paragraph, but is styled like an <h2> -->
<p class="h2">Second-Level Heading</p>

Lede

Add emphasis to an opening paragraph by adding .lede. This should only be used to introduce content at the top of a page, and shouldn’t be used elsewhere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quamquam te quidem video minime esse deterritum. Cum autem venissemus in.

Quod autem magnum dolorem brevem, longinquum levem esse dicitis, id non intellego quale sit. Tenesne igitur, inquam, Hieronymus Rhodius quid dicat esse summum bonum, quo putet omnia referri oportere? Quod equidem non reprehendo; Hoc loco tenere se Triarius non potuit.

<p class="lede">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quamquam te quidem video minime esse deterritum. Cum autem venissemus in.</p>

<p>Quod autem magnum dolorem brevem, longinquum levem esse dicitis, id non intellego quale sit...</p>

Inline Text Elements

Here are some examples of how common inline elements are styled.

This is bolded text. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

This is a sentence with an inline link to Google. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

This is italicized text. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

This is (infrequently used) strikethrough text. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

This is text formatted with subscript123, and this is text formatted with superscript123.

<p><strong>This is bolded text.</strong> Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>This is a sentence with an <a href="http://www.google.com">inline link to Google.</a> Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p><em>This is italicized text.</em> Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p><s>This is (infrequently used) strikethrough text.</s> Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>This is text formatted with subscript<sub>123</sub>, and this is text formatted with superscript<sup>123</sup>.</p>

Blockquotes

<blockquote> is used for quoting blocks of content from another source within your document.

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>

Pull and Highlight

This is a block quote with a `.pull` class to hook a reader’s attention.

The .pull class is available for pull quotes. Pull quotes are made up of text that is pulled from the text (that is, duplicated) and presented on the page as an attention-grabbing visual element. Pull quotes are commonly used in magazines and on news websites to hook a reader’s attention with a juicy quote from the story.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quamquam te quidem video minime esse deterritum. Cum autem venissemus in Academiae non sine causa nobilitata spatia, solitudo erat ea, quam volueramus.

This is a highlighted blockquote, using the `.blockquote-highlight` class. For showcasing quotes or important pieces of content.

<blockquote class="pull">
  <p>This is a block quote with a `.pull` class to hook a reader’s attention.</p>
</blockquote>

<blockquote class="blockquote-highlight">
  <p>This is a highlighted blockquote, using the `.blockquote-highlight` class. For showcasing quotes or important pieces of content. </p>
</blockquote>

Attribution

Use a <footer> tag for adding an attribution, wrapping the name of a source work in <cite>.

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

Author's Name, Source Title
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>The Author of the <cite>Source Title</cite></footer>
</blockquote>