Text Content

Text content communicates the main information in any given layout. It can be used for anything from a couple of words to long description fields. Use these classes only with <p> elements.

Variants

Lead Paragraph

Use to emphasize the opening paragraph of a page that summarizes its main ideas. Appears only once per page, in the Intro Area pattern.

	Weight	Color	Font Values	Usage
LeadParagraph / Normal	SemiLight 200	#333	font-size: 20px line-height: 30px	For lead paragraphs on light backgrounds

<p class=“c-text-content-lead--normal”>Lorem ipsum dolor...</p>

Copy

LeadParagraph / Light

SemiLight 200

#FFF

font-size: 20px
line-height: 30px

For lead paragraphs on dark or primary green backgrounds

<p class=“c-text-content-lead--light”>Lorem ipsum dolor...</p>

Copy

Body

Use for standard body copy.

Body / Normal

Book 300

#333

font-size: 16px
line-height: 24px

For body copy on light backgrounds

<p class=“c-text-content-body--normal”>Lorem ipsum dolor...</p>

Copy

Body / Light

Book 300

#FFF

font-size: 16px
line-height: 24px

For body copy on dark or primary green backgrounds

<p class=“c-text-content-body--light”>Lorem ipsum dolor...</p>

Copy

Caption

Use for styling secondary or supporting information, especially in forms and disclaimers.

Caption / Normal

Book 300

#333

font-size: 12px
line-height: 18px

For captions on light backgrounds

<p class=“c-text-content-caption--normal”>Lorem ipsum dolor...</p>

Copy

Caption / Subtle

Book 300

#D7D7D7

font-size: 12px
line-height: 18px

For captions on dark backgrounds

<p class=“c-text-content-caption--subtle”>Lorem ipsum dolor...</p>

Copy

Caption / Light

Book 300

#FFF

font-size: 12px
line-height: 18px

For captions on dark or primary green backgrounds

<p class=“c-text-content-caption--light”>Lorem ipsum dolor...</p>

Copy