Text block

This page documents the expected code output and structure necessary to display text blocks correctly in the UI.

Text block base code

All heading and body text is managed by the .text-block class, which ensures consistent typography and spacing across all text elements.

Headings can use any HTML heading tag from <h1> to <h6>, depending on the page hierarchy and context. Each paragraph is placed within its own <p> element beneath the heading.

Heading text

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

Mauris ac sapien non felis scelerisque tincidunt.

html 
<div class="text-block">
    <h2 class="headline-lg">Heading text</h2>
    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>
    <p>Mauris ac sapien non felis scelerisque tincidunt.</p>
</div>

Headings

When choosing a heading level, always follow the logical structure of the page to maintain accessibility and clarity. For example, <h1> should typically be reserved for the main page title, with <h2> and lower levels used for subheadings in a clear, nested order. Avoid skipping levels (e.g., from <h2> directly to <h4>) to ensure screen readers and other assistive technologies can interpret the content structure correctly.

Headings within a text block use the .display-*, .headline-*, and .title-* classes to apply consistent typography styles. These classes define the size and visual weight of the heading, with display being the largest, followed by headline, and then title for more compact use.

For more guidance go to the style page.

Display

Headline

Title

html 
<div class="text-block">
    <h1 class="display-lg">Display heading</h1>
</div>

<div class="text-block">
    <h2 class="headline-lg">Headline heading</h2>
</div>

<div class="text-block">
    <h3 class="title-md">Title heading</h3>
</div>

Modifiers

Eyebrow

Use the .eyebrow class to include eyebrow text above a heading.

Eyebrow text

Heading text

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

html 
<div class="text-block">
    <span class="eyebrow">Eyebrow text</span>

    <h2 class="headline-lg">Heading text</h2>
    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>
</div>

Inline icon

Inline icons can be added inside the heading tag, by including <span class="icon"></span> with the chosen icon inside.

Heading text

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

html 
<div class="text-block">
    <h2 class="headline-lg">
        <span class="icon">
            <i class="fa-regular fa-ghost" aria-hidden="true"></i>
        </span>
        Heading text
    </h2>
    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>
</div>