Typography

All typography styles documentation, including headings, body text, and more.

Inline text elements

Styling for common inline HTML5 elements.

You can use the mark tag to highlight text.

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

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

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

This line of text will render as underlined

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

This line rendered as bold text.

This line rendered as italicized text.

H2O

e = mc2

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
<p>H<sub>2</sub>O</p>
<p>e = mc<sup>2</sup></p>

Anchor

<a href="#">Anchor</a>

Address

Cactu
Unknow street, #000
Colima, Colima
28010, México
<address>
  <strong>Cactu</strong><br>
  Unknow street, #000<br>
  Colima, Colima<br>
  28010, México
</address>

Abbreviations

CSS
<abbr title="Cascading Style Sheets">CSS</abbr>

Summary

Read more

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.

<details>
  <summary>Read more</summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
</details>

Blockquotes

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

Headings

All HTML headings, <h1> through <h6>, are available.

Heading Example
<h1></h1> h1. Cactu heading
<h2></h2> h2. Cactu heading
<h3></h3> h3. Cactu heading
<h4></h4> h4. Cactu heading
<h5></h5> h5. Cactu heading
<h6></h6> h6. Cactu heading
<h1>h1. Cactu heading</h1>
<h2>h2. Cactu heading</h2>
<h3>h3. Cactu heading</h3>
<h4>h4. Cactu heading</h4>
<h5>h5. Cactu heading</h5>
<h6>h6. Cactu heading</h6>

h1. Cactu heading

h2. Cactu heading

h3. Cactu heading

h4. Cactu heading

h5. Cactu heading

h6. Cactu heading

<p class="h1">h1. Cactu heading</p>
<p class="h2">h2. Cactu heading</p>
<p class="h3">h3. Cactu heading</p>
<p class="h4">h4. Cactu heading</p>
<p class="h5">h5. Cactu heading</p>
<p class="h6">h6. Cactu heading</p>

Alignment

Cactu has three different alignment classes: text-left, text-centered or text-right. By default all text always are at left.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<p class="text-centered">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Author name
<blockquote class="text-right">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  <cite>Author name</cite>
</blockquote>