Type

Headings

Markup	Demo
`<h1>Hello world</h1>`	Hello world
`<h2>Hello world</h2>`	Hello world
`<h3>Hello world</h3>`	Hello world
`<h4>Hello world</h4>`	Hello world
`<h5>Hello world</h5>`	Hello world
`<h6>Hello world</h6>`	Hello world

Classes in the form .[heading level] (e.g. .h2) are provided to match heading font sizes where the use of a semantic heading is not appropriate.

Fact check headings

.h1s on fact checks are a bit smaller.

Hello world

View code

<div class="cms-content">
    <div class="fact-check">
        <h1>Hello world</h1>
        <h2>Hello world</h2>
        <h3>Hello world</h3>
        <h4>Hello world</h4>
    </div>
</div>

Heading with highlight

Hello world

View code

<h1>
    <span class="bg-highlight">Hello w</span>orld
</h1>

You can alternatively use the .highlight-js helper to automatically add the .bg-highlight to your heading.

Other styles

Markup	Demo
`<strong>Bold text</strong>`	Bold text
`<em>Italic text</em>`	Italic text
`<small>Small text</small>`	Small text
`<span class="text-muted">Muted text</span>`	Muted text

Lists

Item 1
Item 2
Item 3

View code

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Paragraphs

Lead paragraph goes here. Just a couple of sentences. But often it’s a lot more copy, so perhaps this is a better size realistically.

Body text dolor sit amet, consectetur adipiscing elit. Donec molestie eros vitae lorem porta suscipit. Morbi nisl enim, placerat sed augue nec.

Curabitur id est diam. Integer lectus dui, posuere quis augue id, pellentesque accumsan elit. Morbi quis mauris ornare, consequat velit nec,

View code

<div class="cms-content">
    <p class="lead">
        Lead paragraph goes here. Just a couple of sentences. But often it’s a lot more copy, so perhaps this is a better size realistically.
    </p>
    <p>
        Body text dolor sit amet, <strong>consectetur adipiscing elit</strong>.
        Donec molestie <a href="#">eros vitae lorem porta</a> suscipit.
        Morbi nisl enim, placerat sed augue nec.
    </p>
    <p>
        <em>Curabitur id est diam.</em> Integer lectus dui, posuere quis augue
        id, pellentesque accumsan elit. Morbi quis mauris ornare, consequat
        velit nec,
    </p>
</div>