Switch to M&TTitle
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 in the Intro Area pattern.
| Weight | Color | Font Values | Usage | |
|---|---|---|---|---|
Title1/Normal | Regular 400 | #425968 | font-size: 32px line-height: 40px | For first level titles on light backgrounds |
<h1 class="c-title-1--normal">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 | Medium 500 | #425968 | font-size: 24px line-height: 30px | For second level titles on light backgrounds |
<h2 class="c-title-2--normal">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 | #425968 | font-size: 18px line-height: 24px | For third level titles on light backgrounds |
<h3 class="c-title-3--normal">Lorem ipsum</h3>Use for any Title elements that belong in the fourth level of the visual hierarchy. One example of this is the navigation title, found in the Intro Area pattern.
Title4/Normal | Bold 700 | #425968 | font-size: 14px line-height: 20px | For fourth level titles on light backgrounds |
<h4 class="c-title-4--normal">Lorem ipsum</h4>