<h1>Default Heading Level 1</h1>

<h2>Default Heading Level 2</h2>

<h3>Default Heading Level 3</h3>

<h4>Default Heading Level 4</h4>

<h5>Default Heading Level 5</h5>

<h6>Default Heading Level 6</h6>

<h1 class="type-m">Level 1 heading with type-m class applied</h1>

<h3 class="type-xxl">Level 3 heading with type-xxl class applied</h3>
<h1>Default Heading Level 1</h1>

<h2>Default Heading Level 2</h2>

<h3>Default Heading Level 3</h3>

<h4>Default Heading Level 4</h4>

<h5>Default Heading Level 5</h5>

<h6>Default Heading Level 6</h6>

<h1 class="type-m">Level 1 heading with type-m class applied</h1>

<h3 class="type-xxl">Level 3 heading with type-xxl class applied</h3>
/* No context defined for this component. */
  • Content:
    h1, h2 {
    	font-weight: 200;
    }
    
    h3, h4 {
    	font-weight: 500;
    }
    
    h1 {
    	@include font-scale(xxxl, helvetica);
    }
    
    h2 {
    	@include font-scale(xxl, helvetica);
    }
    
    h3 {
    	@include font-scale(l, helvetica);
    }
    
    h4 {
      @include font-scale(base, helvetica);
    }
    
  • URL: /components/raw/headings/headings.scss
  • Filesystem Path: src/components/01-type/02-headings/headings.scss
  • Size: 246 Bytes

Headings

Headings have default sizing based on level however they can have the type t-shirt sizes applied with a class on the heading, or when creating rules for a heading in context you can @include the sizing rules as part of their CSS to avoid adding the class.