Adding visually engaging elements to content

Creating beautiful content with text styles

Stan Jobs
Stan Jobs

You can make the font size of a paragraph of text larger by giving it a class name of font-size-xl using the Source Code editor when editing an article. This can be used to emphasize a point or summarize the content of the article.

This article provides an overview of some of the most common typographic elements used in articles, covering everything from headings and blockquotes to tabs and toggles. Many of these elements are applied using the editor toolbar and their appearance may differ between themes.

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>

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.