Springboard

Headings 

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
 
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
 
/* No context defined for this component. */
  • Content: 
    h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $font-stack-sans;
  color: $color-soft-black;
  font-weight: bold;
  line-height: 1.2;
  margin: 2rem 0 0.5rem;
}

h1,
.h1 {
}


// 1.125 Scale
// https://type-scale.com/?size=16&scale=1.125&text=A%20Visual%20Type%20Scale&font=Merriweather&fontweight=600&bodyfont=Merriweather&bodyfontweight=400&lineheight=1.65&backgroundcolor=white&fontcolor=%23333&preview=false

h1,
.h1 {
  font-size: 1.802em;
}

h2,
.h2 {
  font-size: 1.602em;
}

h3,
.h3 {
  font-size: 1.424em;
}

h4,
.h4 {
  font-size: 1.266em;
}

h5,
.h5 {
  font-size: 1.125em;
}

h6,
.h6 {
  font-size: 1em;
}

// 1.25 Scale
// https://type-scale.com/?size=16&scale=1.250&text=A%20Visual%20Type%20Scale&font=Merriweather&fontweight=600&bodyfont=Merriweather&bodyfontweight=400&lineheight=1.65&backgroundcolor=white&fontcolor=%23333&preview=false

@include traditional {
  h1,
  .h1 {
    font-size: 3.052em;
  }

  h2,
  .h2 {
    font-size: 2.441em;
  }

  h3,
  .h3 {
    font-size: 1.953em;
  }

  h4,
  .h4 {
    font-size: 1.563em;
  }

  h5,
  .h5 {
    font-size: 1.125em;
  }

  h6,
  .h6 {
    font-size: 1em;
  }
}
  • URL: /components/raw/headings/_sass.scss
  • Filesystem Path: components/01-elements/01-text/01-headings/_sass.scss
  • Size: 1.1 KB

Use the class name equivalent to when necessary so that you can use the correct semantic heading but still get the visual styling you want.

Example:

<h2 class="h1">I am semantically an H2, but look like an H1</h2>