Typography

<style>
    span {
        display: block;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 8px;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    small,
    blockquote,
    .preamble {
        display: block;
    }

    blockquote {
        margin: 0;
    }

    .preamble p {
        display: initial;
        margin-left: 0;
    }

    .t-wrapper {
        margin-bottom: 32px;
    }
</style>


<div class="t-wrapper">
    <span>--- H1 ---</span>
    <h1>Swegon Brown Bold, 48px/56px</h1>
</div>

<div class="t-wrapper">
    <span>--- H2 ---</span>
    <h2>Swegon Brown Bold, 40px/48px</h2>
</div>

<div class="t-wrapper">
    <span>--- H3 ---</span>
    <h3>Swegon Brown Bold, 36px/40px</h3>
</div>

<div class="t-wrapper">
    <span>--- H4 ---</span>
    <h4>Swegon Brown Bold, 24px/32px</h4>
</div>

<div class="t-wrapper">
    <span>--- H5 ---</span>
    <h5>Swegon Brown Bold, 20px/28px</h5>
</div>

<div class="t-wrapper">
    <span>--- H6 ---</span>
    <h6>Swegon Brown Regular, All Caps, 20px/32px</h6>
</div>

<div class="t-wrapper">
    <span>--- Preamble ---</span>
    <p class="preamble">Swegon Brown Regular, 20px/32px</p>
</div>

<div class="t-wrapper">
    <span>--- Body ---</span>
    <p>
        Swegon Brown regular, 16px/24px
    </p>
</div>

<div class="t-wrapper">
    <span>--- Quote ---</span>
    <blockquote>
        Swegon Brown Italic, 42px/48px
    </blockquote>
</div>

<div class="t-wrapper">
    <span>--- List small text ---</span>
    <small>Swegon Brown Regular, 14px/20px</small>
</div>

<div class="t-wrapper">
    <span>--- Text links ---</span>
    <p>
        <a href="#">Swegon Brown Regular, same as text size</a>
    </p>
</div>

<div class="t-wrapper cardinal theme--cardinal">
    <span>--- Text links - cardinal theme ---</span>
    <p>
        <a href="#">Swegon Brown Regular, same as text size</a>
    </p>
</div>

<div class="t-wrapper cardinal theme--consumer">
    <span>--- Text links - consumer theme ---</span>
    <p>
        <a href="#">Swegon Brown Regular, same as text size</a>
    </p>
</div>

<div class="t-wrapper">
    <span>--- Disclaimer text ---</span>
    <p class="disclaimer">Swegon Brown Regular, 14px/20px</p>
</div>