We suggest to use classes also for default elements like headings. Link will come soon to provide reasoning behind.
<!-- Default -->
<p class="lbh-u-p lbh-u-p--default">A 19px body copy paragraph. This includes even more text to give a good representation of a more average length paragraph. That way you can see more than one line wrapping.</p>
<!-- Lede -->
<p class="lbh-u-p lbh-u-p--lede">A 24px lead paragraph with some longer text so that you can see how it wraps.</p>
<!-- Small -->
<p class="lbh-u-p lbh-u-p--small">A 16px supporting text paragraph. This includes even more text to give a good representation of a more average length paragraph. That way you can see more than one line wrapping.</p>
.lbh-u-p {
max-width: var(--width-main);
}
.lbh-u-p--default {
font-size: var(--font-size-paragraph-default);
}
.lbh-u-p--lede {
font-size: var(--font-size-paragraph-lede);
}
.lbh-u-p--small {
font-size: var(--font-size-paragraph-small);
}