Pattern Library

Headings

Guidelines

We suggest to use classes also for default elements like headings. Link will come soon to provide reasoning behind.

To do

  • We should have stiling for all the headings elements so down to H6.
<!-- Default -->
<h1 class="lbh-u-h1">Extra Large 48px</h1>


<!-- Large -->
<h2 class="lbh-u-h2">Large 36px</h2>


<!-- Medium -->
<h3 class="lbh-u-h3">Medium 20px</h3>


<!-- Small -->
<h4 class="lbh-u-h4">Small 16px</h4>
  • Content: 
    .lbh-u-h1,
.lbh-u-h2,
.lbh-u-h3,
.lbh-u-h4 {
    font-weight: 700;
}

.lbh-u-h1 {
    font-size: var(--font-size-heading-xlarge);
}

.lbh-u-h2 {
    font-size: var(--font-size-heading-large);
}

.lbh-u-h3 {
    font-size: var(--font-size-heading-medium);
}

.lbh-u-h4 {
    font-size: var(--font-size-heading-small);
}
  • URL: /components/raw/headings/headings.css
  • Filesystem Path: components/01-particles/03-headings/headings.css
  • Size: 318 Bytes