#Text Elements

Here is a list of how Cirrus styles different text elements.

#Headings

Cirrus styles the standard header tags h1, h2, h3, h4, h5, h6 with font sizes ranging from 4rem to 1rem where each rem is 16px. Cirrus allows you to choose between two fonts: Montserrat and Nunito Sans by specifying the font weight of the headers. Simply add the font-alt font-light class to your headings to use Nunito Sans and leave it as is to use Montserrat.

Standard headings:

this is h1`h1` 3rem (48px)

this is h2`h2` 2.5rem (40px)

this is h3`h3` 2rem (32px)

this is h4`h4` 1.75rem (24px)

this is h5`h5` 1.5rem (16px)

this is h6`h6` 1.25rem (12px)

Light headings:

this is h1`h1` 3rem (48px)

this is h2`h2` 2.5rem (40px)

this is h3`h3` 2rem (32px)

this is h4`h4` 1.75rem (24px)

this is h5`h5` 1.5rem (16px)

this is h6`h6` 1.25rem (12px)

<h1 class="uppercase">this is h1<span class="desc"><code>h1</code> 3rem (48px)</span></h1>
<h2 class="uppercase">this is h2<span class="desc"><code>h2</code> 2.5rem (40px)</span></h2>
<h3 class="uppercase">this is h3<span class="desc"><code>h3</code> 2rem (32px)</span></h3>
<h4 class="uppercase">this is h4<span class="desc"><code>h4</code> 1.75rem (24px)</span></h4>
<h5 class="uppercase">this is h5<span class="desc"><code>h5</code> 1.5rem (16px)</span></h5>
<h6 class="uppercase">this is h6<span class="desc"><code>h6</code> 1.25rem (12px)</span></h6>

<h1 class="font-alt font-light uppercase">this is h1<span class="desc"><code>h1</code> 3rem (48px)</span></h1>
<h2 class="font-alt font-light uppercase">this is h2<span class="desc"><code>h2</code> 2.5rem (40px)</span></h2>
<h3 class="font-alt font-light uppercase">this is h3<span class="desc"><code>h3</code> 2rem (32px)</span></h3>
<h4 class="font-alt font-light uppercase">this is h4<span class="desc"><code>h4</code> 1.75rem (24px)</span></h4>
<h5 class="font-alt font-light uppercase">this is h5<span class="desc"><code>h5</code> 1.5rem (16px)</span></h5>
<h6 class="font-alt font-light uppercase">this is h6<span class="desc"><code>h6</code> 1.25rem (12px)</span></h6>

#Headline

headline-1`headline-1` 6.5rem (104px)

headline-2`headline-2` 5.5rem (88px)

headline-3`headline-3` 4.5rem (72px)

headline-4`headline-4` 3.5rem (56px)

<h1 class="headline-1 uppercase"> <b>headline-1</b><span class="desc"><code>headline-1</code> 6.5rem (104px)</span></h1>
<h1 class="headline-2 uppercase"> <b>headline-2</b><span class="desc"><code>headline-2</code> 5.5rem (88px)</span></h1>
<h1 class="headline-3 uppercase"> <b>headline-3</b><span class="desc"><code>headline-3</code> 4.5rem (72px)</span></h1>
<h1 class="headline-4 uppercase"> <b>headline-4</b><span class="desc"><code>headline-4</code> 3.5rem (56px)</span></h1>

#Blockquotes

Blockquotes are beatifully designed to help you cite from other sources.

You know, I think Cirrus is a pretty good CSS framework. - Marc Andreessen

#Typesetting

Paragraph

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Blockquote

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

Article

Lead

This is a lead. A lead is slightly larger than your average paragraph.

Title and Subtitle

The title and subtitle helper classes bring two elements representing a title and a subtitle closer together. The title is bolded by default.

I am the title.

I am the subtitle.

#Misc.

Anchor

The quick brown fox jumps over the lazy dog.

<p><a href="#" class="subtitle">
    The quick brown fox jumps over the lazy dog.
</a></p>

Emphasis

The quick brown fox jumps over the lazy dog.

<p><em>The quick brown fox jumps over the lazy dog.</em></p>

Small