#Text Elements

Here is how Cirrus styles other text elements in the framework.

#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

<blockquote>
    <p>
        You know, I think Cirrus is a pretty good CSS framework. - <em>Marc Andreessen</em>
    </p>
</blockquote>

#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
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.
Lead

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

<p class="lead">
    This is a lead. A <code>lead</code> is slightly larger than your average paragraph.
</p>
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.

<h6 className="title">I am the title.</h6>
<p className="subtitle">I am the subtitle.</p>

#Misc.

Normal

The quick brown fox jumps over the lazy dog.

<p class="font-style-normal">The quick brown fox jumps over the lazy dog.</p>
<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>

Italics

The quick brown fox jumps over the lazy dog.

<p class="font-style-italics">The quick brown fox jumps over the lazy dog.</p>

Small

The quick brown fox jumps over the lazy dog.

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

Strong

The quick brown fox jumps over the lazy dog.

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

Underline

The quick brown fox jumps over the lazy dog.

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

Uppercase

The quick brown fox jumps over the lazy dog.

<p class="uppercase">The quick brown fox jumps over the lazy dog.</p>

Lowercase

The quick brown fox jumps over the lazy dog.

<p class="lowercase">The quick brown fox jumps over the lazy dog.</p>

Capitalize

The quick brown fox jumps over the lazy dog.

<p class="capitalize">The quick brown fox jumps over the lazy dog.</p>

Normal Case

The quick brown fox jumps over the lazy dog.

<p class="normal-case">The quick brown fox jumps over the lazy do.</p>

White

The quick brown fox jumps over the lazy dog.

<p class="text-white bg-gray-900">The quick brown fox jumps over the lazy dog.</p>

Caret

<p class="caret"></p>

Right to left

right to left

<p class="rtl"></p>

Font Alt (Use Nunito Sans with titles)

This title uses Nunito Sans.
<h6 class="font-alt">This title uses Nunito Sans.</h6>

#Other Text Elements

YOLO  <abbr>
Foo bar  <code>
Deleted  <del>
Emphasis  <em>
Italis  <i>
Inserted  <ins>
Alt + F4  <kbd>
Highlight  <mark>
kanji<ruby>
Strikethrough  <s>
Sample  <samp>
TextSubscript  <sub>
TextSuperscript  <sup>
  <time>
x = y + 2  <var>