Employer Style Base Pattern Library

Headings: Headingheroxl 

<header class="heading--hero--xl">
    <h1 class="heading--hero--xl__heading">Heading Hero XL</h1>
    <p class="heading--hero--xl__subheading">Lorem ipsum dolor</p>
</header>
 
<header class="{{ heading-class }}">
  <h1 class="{{ heading-class }}__heading">{{ heading-type }}</h1>
  <p class="{{ heading-class }}__subheading">Lorem ipsum dolor</p>
</header>
 
{
  "order": 1,
  "heading-type": "Heading Hero XL",
  "heading-class": "heading--hero--xl"
}
  • Content: 
    @mixin heading--hero {
  h1 {
    @include font-style--xxl-light;
    margin-bottom: 0;
  }

  p {
    @include font-style--large-regular;
    margin-top: $type-margin-large;
  }
}

@mixin heading--hero--xl {
  h1 {
    @include font-style--med-bold-uppercase;
    line-height: normal;
    margin-bottom: 0;
  }

  p {
    @include font-style--xl-light;
    line-height: normal;
    margin-top: $type-margin;
  }
}

@mixin heading--section {
  margin-bottom: $type-margin;

  &__heading {
    @include font-style--xl-light;
    @include base-heading-copy;
  }

  p {
    color: $text-color-grey;
  }
}

@mixin heading--section--small {
  @include font-style--med-bold-uppercase;
  margin-bottom: $type-margin;
  color: $header-text-color;
}

@mixin heading--section--w-subhead {
  margin-bottom: $type-margin;

  &__heading {
    @include font-style--med-bold-uppercase;
    margin-bottom: 0;
    color: $header-text-color;
  }

  &__subheading {
    margin-top: $type-margin;
    @include font-style--xl-light;
    color: $header-text-color;
  }
}

@mixin heading--item {
  @include font-style--small-bold-uppercase;
  margin-bottom: $type-margin--small;
  color: $header-text-color;
}

@mixin heading--small {
  h1 {
    @include font-style--xxl-light;
    margin-bottom: 0;
  }

  p {
    @include font-style--large-regular;
    margin-top: $type-margin;
  }
}
  • URL: /components/raw/headings/_headings.scss
  • Filesystem Path: sass/directives/02_base_components/headings/_headings.scss
  • Size: 1.4 KB

TODO - make variations for headings with and without subheads, with and without subclasses