locomotive-boilerplate/assets/styles/elements/_headings.scss

// ==========================================================================
// Base / Headings
// ==========================================================================

@mixin h {
    margin-top: 0;
    line-height: $line-height-h;
}

//
// Provide a generic class to apply common heading styles.
//
// @example
//   <p class="u-h"></p>
//
//
.o-h {
    @include h;
}

//
// Styles for headings 1 through 6 with classes to provide
// a double stranded heading hierarchy, e.g. we semantically
// need an H2, but we want it to be sized like an H1:
//
// @example
//   <h2 class="o-h1"></h2>
//
//
h1, .o-h1 {
    @extend .o-h;

    font-size: rem($font-size-h1);
}

h2, .o-h2 {
    @extend .o-h;

    font-size: rem($font-size-h2);
}

h3, .o-h3 {
    @extend .o-h;

    font-size: rem($font-size-h3);
}

h4, .o-h4 {
    @extend .o-h;

    font-size: rem($font-size-h4);
}

h5, .o-h5 {
    @extend .o-h;

    font-size: rem($font-size-h5);
}

h6, .o-h6 {
    @extend .o-h;

    font-size: rem($font-size-h6);
}