Paragraphs

The .cmp-paragraph class applies the default paragraph typography mixin to any element, providing consistent font family, size, line height, and vertical margins.

Important: The design system’s base paragraph styles only apply to <p> elements with no class attribute (via :not([class]) selectors). If you add any class to a paragraph — even a utility class like .util-color-red — the base styles will no longer apply. In those cases, add .cmp-paragraph alongside your other classes to retain the paragraph typography.

Paragraph Component

This is a paragraph using the .cmp-paragraph component class. It uses Merriweather Sans at 1rem with 1.5 line height.

A second paragraph component demonstrates the consistent vertical spacing between adjacent paragraphs.

<p class="cmp-paragraph">
  This is a paragraph using the .cmp-paragraph component class. It uses
  Merriweather Sans at 1rem with 1.5 line height.
</p>
<p class="cmp-paragraph">
  A second paragraph component demonstrates the consistent vertical spacing
  between adjacent paragraphs.
</p>

CSS Class

Class	Description
.cmp-paragraph	Applies default paragraph typography (Merriweather Sans, 1rem, 1.5 line height)

Usage

Use .cmp-paragraph when you need paragraph styling on a non-<p> element, or when the element already has another class that might interfere with base <p> styling:

<div class="cmp-paragraph">Styled like a paragraph</div>