UCLA Component Library

Headings

bitbucket Report an Issue Slack Join the Slack Discussion

These are heading styles. Font-style should be bold for these headers.

Do’s

  • Use the correct header tags when possible
  • Use the respective “h1” - “h6” classnames to inherit respective header styles (i.e with CMS that makes it hard to customize HTML semantics)

Don’ts

  • Don’t use “h1” - “h6” classnames to incorrectly alter styles astray from the brand guidelines

H1 Title

<!--
Desktop: font-size: 48px; line-height: 54px;
Mobile: font-size: 36px; line-height: 40.5px; -->
<h1>H1 Title</h1>
<!-- Class name styles inheritance -->
<!-- <p class="h1">H1 Title</p> -->

H2 Title

<!--
Desktop: font-size: 36px; line-height: 40.5px;
Mobile: font-size: 28px; line-height: 32px; -->
<h2>H2 Title</h2>
<!-- Class name styles inheritance -->
<!-- <p class="h2">H2 Title</p> -->

H3 Title

<!-- Desktop & Mobile: font-size: 24px; line-height: 27px; -->
<h3>H3 Title</h3>
<!-- Class name styles inheritance -->
<!-- <p class="h3">H3 Title</p> -->

H4 Title

<!-- Desktop & Mobile: font-size: 20px; line-height: 22.5px; -->
<h4>H4 Title</h4>
<!-- Class name styles inheritance -->
<!-- <p class="h4">H4 Title</p> -->
H5 Title
<!-- Desktop & Mobile: font-size: 16px; line-height: 20px; -->
<h5>H5 Title</h5>
<!-- Class name styles inheritance -->
<!-- <p class="h5">H5 Title</p> -->
H6 Title
<!-- Desktop & Mobile: font-size: 12.8px; line-height: 16px; -->
<h6>H6 Title</h6>
<!-- Class name styles inheritance -->
<!-- <p class="h6">H6 Title</p> -->