Reference CWDS Typography Style Guide
CWDS Typography Style Guide
Style GuideEvergreenPublic
CwdsTypographyDesign SystemStyle Guide
Headlines
Display
Display Text Example
| Size | Line-height | Weight | |
|---|---|---|---|
| Mobile | 2.25rem (36px) | 2.5rem (40px) | 700 |
| Desktop | 3rem (48px) | 3.375rem (54px) | 700 |
AEM HTML
<div class="ads__main-section">
<p class="display-text">Display Text Example</p>
</div>
Nuxt
<CwdsTypography variant="display">Display Text Example</CwdsTypography>
Heading 1
Heading 1 Example
| Size | Line-height | Weight | |
|---|---|---|---|
| Mobile | 2rem (32px) | 2.5rem (40px) | 700 |
| Desktop | 2.5rem (40px) | 3rem (48px) | 700 |
AEM HTML
<div class="ads__main-section">
<h1>Heading 1 Example</h1>
</div>
Nuxt
<CwdsTypography variant="h1">Heading 1 Example</CwdsTypography>
Heading 2
Heading 2 Example
| Size | Line-height | Weight | |
|---|---|---|---|
| Mobile | 1.75rem (28px) | 2rem (32px) | 700 |
| Desktop | 2.125rem (34px) | 2.25rem (36px) | 700 |
AEM HTML
<div class="ads__main-section">
<h2>Heading 2 Example</h2>
</div>
Nuxt
<CwdsTypography variant="h2">Heading 2 Example</CwdsTypography>
Heading 3
Heading 3 Example
| Size | Line-height | Weight | |
|---|---|---|---|
| Mobile | 1.5rem (24px) | 1.75rem (28px) | 700 |
| Desktop | 1.75rem (28px) | 2rem (32px) | 700 |
AEM HTML
<div class="ads__main-section">
<h3>Heading 3 Example</h3>
</div>
Nuxt
<CwdsTypography variant="h3">Heading 3 Example</CwdsTypography>
Heading 4
Heading 4 Example
| Size | Line-height | Weight | |
|---|---|---|---|
| Mobile | 1.25rem (20px) | 1.5rem (24px) | 700 |
| Desktop | 1.5rem (24px) | 1.75rem (28px) | 700 |
AEM HTML
<div class="ads__main-section">
<h4>Heading 4 Example</h4>
</div>
Nuxt
<CwdsTypography variant="h4">Heading 4 Example</CwdsTypography>
Heading 5
Heading 5 Example
| Size | Line-height | Weight | |
|---|---|---|---|
| Mobile | 1.125rem (18px) | 1.5rem (24px) | 700 |
| Desktop | 1.25rem (20px) | 1.5rem (24px) | 700 |
AEM HTML
<div class="ads__main-section">
<h5>Heading 5 Example</h5>
</div>
Nuxt
<CwdsTypography variant="h5">Heading 5 Example</CwdsTypography>
Heading 6
Heading 6 Example
| Size | Line-height | Weight | |
|---|---|---|---|
| Mobile | 1rem (16px) | 1.25rem (20px) | 700 |
| Desktop | 1.125rem (18px) | 1.5rem (24px) | 700 |
AEM HTML
<div class="ads__main-section">
<h6>Heading 6 Example</h6>
</div>
Nuxt
<CwdsTypography variant="h6">Heading 6 Example</CwdsTypography>
Claim
Claim Text Example
| Size | Line-height | Weight | |
|---|---|---|---|
| Mobile | 1.375rem (22px) | 1.75rem (28px) | 400 |
| Desktop | 1.625rem (26px) | 1.875rem (30px) | 400 |
AEM HTML
<div class="ads__main-section">
<p class="claim-text">Claim Text Example</p>
</div>
Nuxt
<CwdsTypography variant="claim">Claim Text Example</CwdsTypography>
Claim Secondary
Claim Secondary Example
| Size | Line-height | Weight | |
|---|---|---|---|
| Mobile | 1.375rem (22px) | 1.75rem (28px) | 300 |
| Desktop | 1.625rem (26px) | 1.875rem (30px) | 300 |
AEM HTML
<div class="ads__main-section">
<p class="claim-text">Claim Secondary Example</p>
</div>
Nuxt
<CwdsTypography variant="claim-secondary">Claim Secondary Example</CwdsTypography>
Stat
85%
| Size | Line-height | Weight | |
|---|---|---|---|
| Mobile | 2rem (32px) | 2.5rem (40px) | 700 |
| Desktop | 2.5rem (40px) | 3rem (48px) | 700 |
AEM HTML
<div class="ads__main-section">
<p class="stat-text">85%</p>
</div>
Nuxt
<CwdsTypography variant="stat">85%</CwdsTypography>
Quote
A meaningful quote from a trusted source.
| Size | Line-height | Weight | |
|---|---|---|---|
| Mobile | 1.25rem (20px) | 1.75rem (28px) | 400 |
| Desktop | 1.5rem (24px) | 2.25rem (36px) | 400 |
AEM HTML
<div class="ads__main-section">
<p class="quote-text">A meaningful quote from a trusted source.</p>
</div>
Nuxt
<CwdsTypography variant="quote">A meaningful quote from a trusted source.</CwdsTypography>
Universal
Body Large
Body large paragraph text for emphasized content sections.
| Size | Line-height | Weight | |
|---|---|---|---|
| All | 1.125rem (18px) | 1.5rem (24px) | 400 |
AEM HTML
<div class="ads__main-section">
<p class="body-text-large">Body large paragraph text.</p>
</div>
Nuxt
<CwdsTypography variant="body-large">Body large paragraph text.</CwdsTypography>
Body Regular
Body regular paragraph text for standard content.
| Size | Line-height | Weight | |
|---|---|---|---|
| All | 1rem (16px) | 1.25rem (20px) | 400 |
AEM HTML
<div class="ads__main-section">
<p class="body-text-regular">Body regular paragraph text.</p>
</div>
Nuxt
<CwdsTypography variant="body-regular">Body regular paragraph text.</CwdsTypography>
Body Small
Body small text for secondary information.
| Size | Line-height | Weight | |
|---|---|---|---|
| All | 0.875rem (14px) | 1rem (16px) | 400 |
AEM HTML
<div class="ads__main-section">
<p class="body-text-small">Body small text.</p>
</div>
Nuxt
<CwdsTypography variant="body-small">Body small text.</CwdsTypography>
Eyebrow
Eyebrow Label
| Size | Line-height | Weight | Extra | |
|---|---|---|---|---|
| All | 0.75rem (12px) | 1rem (16px) | 700 | uppercase, 0.05em spacing |
AEM HTML
<div class="ads__main-section">
<span class="eyebrow-text">Eyebrow Label</span>
</div>
Nuxt
<CwdsTypography variant="eyebrow">Eyebrow Label</CwdsTypography>
Caption
Caption text for images and figures.
| Size | Line-height | Weight | |
|---|---|---|---|
| All | 0.875rem (14px) | 1rem (16px) | 400 |
AEM HTML
<div class="ads__main-section">
<span class="caption-text">Caption text for images.</span>
</div>
Nuxt
<CwdsTypography variant="caption">Caption text for images.</CwdsTypography>
Footnote
Footnote or disclaimer text with muted color.
| Size | Line-height | Weight | Color | |
|---|---|---|---|---|
| All | 0.75rem (12px) | 1rem (16px) | 400 | #5b5b5b |
AEM HTML
<div class="ads__main-section">
<p class="footnote-text">Footnote or disclaimer text.</p>
</div>
Nuxt
<CwdsTypography variant="footnote">Footnote or disclaimer text.</CwdsTypography>