Style Name Attributes Selectors Used For

Heading 1

  • Metropolis Light
  • color: #000000
  • font-size: 32px
  • letter-spacing: normal
h1
  • Login screen product name (login_productName)
  • Large display numbers (charts/data visualization)

Heading 2

  • Metropolis Light
  • color: #000000
  • font-size: 28px
  • letter-spacing: normal
h2
  • Main content header (page_mainHeading)

Heading 3

  • Metropolis Light
  • color: #000000
  • font-size: 22px
  • letter-spacing: normal
h3
  • Secondary content header (page_secondaryHeading)
  • Modal/Wizard/Dialog header (modal_header)

Heading 4

  • Metropolis Light
  • color: #000000
  • font-size: 18px
  • letter-spacing: normal
h4
  • Tertiary content header (page_tertiaryHeading)
  • Card header/title (card_title)
Heading 5
  • Metropolis Regular
  • color: #565656
  • font-size: 16px
  • letter-spacing: 0.01em
h5
  • Section header 1 (page_sectionHeader)
  • Introductory paragraph (page_introParagraph)
Heading 6
  • Metropolis Medium
  • color: #313131
  • font-size: 14px
  • letter-spacing: normal
h6
  • Section header 2
  • Sidenav section header (sidenav_sectionHeader)
  • TOC header (toc_header)

<h1>Header 1 (Display)</h1>
<h2>Header 2 (Headline)</h2>
<h3>Header 3 (Sub Heading)</h3>
<h4>Header 4 (Section Heading Level 1)</h4>
<h5>Header 5 (Category / group label, TOC)</h5>
<h6>Header 6 (Section Heading Level 2 group label)</h6>