Heading attachment: code & specs

This page documents the expected code output and structure necessary to display a heading attachment correctly in the UI.

Heading attachment base code

The heading attachment component extends the text block component by allowing an additional element to appear inline with the heading. This is achieved by adding a .heading wrapper with .heading-content inside, which contains the heading text. The attached element should then be placed after the .heading-content element within the .heading wrapper.

Heading text

Nullam ullamcorper, mauris nec feugiat fermentum, purus lacus suscipit felis, et facilisis justo lacus id risus.

Heading text

View more

Nullam ullamcorper, mauris nec feugiat fermentum, purus lacus suscipit felis, et facilisis justo lacus id risus.

Heading text

Tag label

Nullam ullamcorper, mauris nec feugiat fermentum, purus lacus suscipit felis, et facilisis justo lacus id risus.

html

<div class="text-block">
    <div class="heading">
        <div class="heading-content">
            <h3 class="headline-02">Heading text</h3>
        </div>
        <button type="button" class="btn-close" aria-label="Close"></button>
    </div>
    <p>Nullam ullamcorper, mauris nec feugiat fermentum, purus lacus suscipit felis, et facilisis justo lacus id risus.</p>
</div>

<div class="text-block">
    <div class="heading">
        <div class="heading-content">
            <h3 class="headline-02">Heading text</h3>
        </div>
        <a class="link-standalone" href="#" target="_self"> 
            <span class="icon">
                <i class="fa-regular fa-arrow-right"></i>
            </span>
            View more
        </a>
    </div>
    <p>Nullam ullamcorper, mauris nec feugiat fermentum, purus lacus suscipit felis, et facilisis justo lacus id risus.</p>
</div>

<div class="text-block">
    <div class="heading">
        <div class="heading-content">
            <h3 class="headline-02">Heading text</h3>
        </div>
        <span class="tag">
            <span class="tag-label">Tag label</span>
        </span>
    </div>
    <p>Nullam ullamcorper, mauris nec feugiat fermentum, purus lacus suscipit felis, et facilisis justo lacus id risus.</p>
</div>

Modifiers

Eyebrow

Use the .eyebrow class to include eyebrow text above a heading inside .heading-content.

Eyebrow text

Heading text

Nullam ullamcorper, mauris nec feugiat fermentum, purus lacus suscipit felis, et facilisis justo lacus id risus.

html

<div class="text-block">
    <div class="heading">
        <div class="heading-content">
            <span class="eyebrow">Eyebrow text</span>
            <h3 class="headline-02">Heading text</h3>
        </div>
        <button type="button" class="btn-close" aria-label="Close"></button>
    </div>
    <p>Nullam ullamcorper, mauris nec feugiat fermentum, purus lacus suscipit felis, et facilisis justo lacus id risus.</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

Nullam ullamcorper, mauris nec feugiat fermentum, purus lacus suscipit felis, et facilisis justo lacus id risus.

html

<div class="text-block">
    <div class="heading">
        <div class="heading-content">
            <h3 class="headline-02">
                <span class="icon"><i class="fa-regular fa-car"></i></span>
                Heading text
            </h3>
        </div>
        <button type="button" class="btn-close" aria-label="Close"></button>
    </div>
    <p>Nullam ullamcorper, mauris nec feugiat fermentum, purus lacus suscipit felis, et facilisis justo lacus id risus.</p>
</div>

Icon block

Icon blocks can be added above the heading, by including <div class="icon-block"></div> inside the .heading-content.

Heading text

Nullam ullamcorper, mauris nec feugiat fermentum, purus lacus suscipit felis, et facilisis justo lacus id risus.

html

<div class="text-block">
    <div class="heading">
        <div class="heading-content">
            <div class="icon-block">
                <i class="fa-solid fa-sparkles"></i>
            </div>
            <h3 class="title-03">Heading text</h3>
        </div>
        <button type="button" class="btn-close" aria-label="Close"></button>
    </div>
    <p>Nullam ullamcorper, mauris nec feugiat fermentum, purus lacus suscipit felis, et facilisis justo lacus id risus.</p>
</div>

Icon block sizes

Like Text blocks, a heading attachment uses two icon block sizes: medium and extra large. Headings styled as title are paired with the default size, medium icon block, while headline-styled headings are paired with the large icon block using the .icon-block-xl class.

Heading text

Nullam ullamcorper, mauris nec feugiat fermentum, purus lacus suscipit felis, et facilisis justo lacus id risus.

html

<div class="text-block">
    <div class="heading">
        <div class="heading-content">
            <div class="icon-block icon-block-xl">
                <i class="fa-solid fa-ghost"></i>
            </div>
            <h3 class="headline-02">Heading text</h3>
        </div>
        <button type="button" class="btn-close" aria-label="Close"></button>
    </div>
    <p>Nullam ullamcorper, mauris nec feugiat fermentum, purus lacus suscipit felis, et facilisis justo lacus id risus.</p>
</div>