Headings
Use .h1 through .h6 classes when you want to match the font styling of a heading but cannot use the associated HTML element.
<p class="h1 truncate ...">The quick brown fox jumped over the lazy dog.</p>
<p class="h2 truncate ...">The quick brown fox jumped over the lazy dog.</p>
<p class="h3 truncate ...">The quick brown fox jumped over the lazy dog.</p>
<p class="h4 truncate ...">The quick brown fox jumped over the lazy dog.</p>
<p class="h5 truncate ...">The quick brown fox jumped over the lazy dog.</p>
<p class="h6 truncate ...">The quick brown fox jumped over the lazy dog.</p>Use font size utilities when you need to create larger (or smaller) headings.
Inline text elements
<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>You can also use our text color and background color utilities to apply theme colors to some or all of a paragraph.
<p>
This is an example of a paragraph that you might find in an article with
<span class="text-red-500">important information</span> highlighted using our
<span class="text-white bg-red-500">color utilities</span> to ensure that
it's not missed by visitors
</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.
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>There are a variety of other elements included in our themes which you can use within article content as well, including:
And much more.
Other elements
You can also easily create your own custom content styles by combining utilities. For example, a box with a light drop shadow could be used to contain a summary of an article:
<div class="py-3 px-6 border border-radius shadow-sm">
<h3 class="mt-4">
Summary
</h3>
<ol>
<li><a href="#">Getting started</a></li>
<li><a href="#">Creating articles</a></li>
<li><a href="#">Styling articles</a></li>
</ol>
</div>The summary, in turn, could be automatically generated by our Table of Contents extension.