Sections

Typography

We provide a sensible set of typography base styles that are inherited by article and post content.

Headings

Use .h1 through .h6 classes when you want to match the font styling of a heading but cannot use the associated HTML element.

h1

The quick brown fox jumped over the lazy dog.

h2

The quick brown fox jumped over the lazy dog.

h3

The quick brown fox jumped over the lazy dog.

h4

The quick brown fox jumped over the lazy dog.

h5

The quick brown fox jumped over the lazy dog.

h6

The quick brown fox jumped over the lazy dog.
<h1 class="truncate ...">The quick brown fox jumped over the lazy dog.</h1>
<h2 class="truncate ...">The quick brown fox jumped over the lazy dog.</h2>
<h3 class="truncate ...">The quick brown fox jumped over the lazy dog.</h3>
<h4 class="truncate ...">The quick brown fox jumped over the lazy dog.</h4>
<h5 class="truncate ...">The quick brown fox jumped over the lazy dog.</h5>
<h6 class="truncate ...">The quick brown fox jumped over the lazy dog.</h6>

Use font size utilities when you need to create larger (or smaller) headings.

Inline text 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.

<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>

Abbreviations

The HTML Abbreviation element (<abbr>) represents an abbreviation or acronym.

Use the optional title attribute to provide an expansion or description for the abbreviation.

attr

HTML

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

Blockquotes

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

Success is not defined by the ability to have no complaints, it is defined by the ability to deal with them.

Mikkel Svane in Startupland
<blockquote class="font-size-lg">
  <p>
    Success is not defined by the ability to have no complaints, it is defined by the ability to deal with them.
  </p>
  <footer class="text-gray-500">
    Mikkel Svane in <cite title="Source Title">Startupland</cite>
  </footer>
</blockquote>

Customization

The $heading_font and $color_heading theme setting variables control the font family and color of headings, respectively.

Variable Description
$margin-heading The margin applied to <h1> - <h6> elements.
$line-height-heading The line height applied to <h1> - <h6> elements.
$font-size-h1 The font size of the <h1> element.
$font-weight-h1 The font weight of the <h1> element.
$font-size-h2 The font size of the <h2> element.
$font-weight-h2 The font weight of the <h2> element.
$font-size-h3 The font size of the <h3> element.
$font-weight-h3 The font weight of the <h3> element.
$font-size-h4 The font size of the <h4> element.
$font-weight-h4 The font weight of the <h4> element.
$font-size-h5 The font size of the <h5> element.
$font-weight-h5 The font weight of the <h5> element.
$font-size-h6 The font size of the <h6> element.
$font-weight-h6 The font weight of the <h6> element.
$color-mark The color of the <mark> element.
$bg-color-mark The background color of the <mark> element.
$padding-blockquote The padding applied to the <blockquote> element.
$margin-blockquote The margin applied to the <blockquote> element.
$color-blockquote The color of the <blockquote> element.
$bg-color-blockquote The background color of the <blockquote> element.
$border-color-blockquote The border color of the <blockquote> element.
$border-width-blockquote The border width of the <blockquote> element.