Switch to WilmingtonTitle
Titles describe the main purpose of a screen and any content subsections in a given layout. Only use the classes with <h1>, <h2>, <h3> or <h4> elements as defined by context. Font size, weight and color will depend on usage, as defined in the variants below.
Variants
Use for the Title element that belongs in the first level of the visual hierarchy. This will usually be the headline title, which appears only once per page.
| Weight | Color | Font Values | Usage | |
|---|---|---|---|---|
Title1/Normal | SemiLight 200 | #007856 | font-size: 32px line-height: 40px | For first level titles on light backgrounds |
<h1 class="c-title-1--normal">Lorem ipsum</h1>Title1/Light | SemiLight 200 | #FFF | font-size: 32px line-height: 40px | For first level titles on dark or primary green backgrounds |
<h1 class="c-title-1--light">Lorem ipsum</h1>Use for any Title elements that belong in the second level of the visual hierarchy. This will usually be section header titles.
Title2/Normal | SemiLight 200 | #333 | font-size: 24px line-height: 30px | For second level titles on light backgrounds |
<h2 class="c-title-2--normal">Lorem ipsum</h2>Title2/Light | SemiLight 200 | #FFF | font-size: 24px line-height: 30px | For second level titles on dark or primary green backgrounds |
<h2 class="c-title-2--light">Lorem ipsum</h2>Use for any Title elements that belong in the third level of the visual hierarchy. This will usually be section or subsection header titles.
Title3/Normal | Medium 500 | #333 | font-size: 16px line-height: 24px | For third level titles on light backgrounds |
<h3 class="c-title-3--normal">Lorem ipsum</h3>Title3/Light | Medium 500 | #FFF | font-size: 16px line-height: 24px | For third level titles on dark or primary green backgrounds |
<h3 class="c-title-3--light">Lorem ipsum</h3>Use for any Title elements that belong in the fourth level of the visual hierarchy. One example of this is the eyebrow text on the card component.
Title4/Normal | SemiLight 200 | #333 | font-size: 12px line-height: 18px letter-spacing: 2px | For fourth level titles on light backgrounds |
<h4 class="c-title-4--normal">Lorem ipsum</h4>Title4/Subtle | SemiLight 200 | #D7D7D7 | font-size: 12px line-height: 18px letter-spacing: 2px | For fourth level titles on dark backgrounds |
<h4 class="c-title-4--subtle">Lorem ipsum</h4>Title4/Light | SemiLight 200 | #FFF | font-size: 12px line-height: 18px letter-spacing: 2px | For fourth level titles on dark or primary green backgrounds |
<h4 class="c-title-4--light">Lorem ipsum</h4>