Employer Style Base Pattern Library

Headings 

<!-- Headinghero -->
<header class="heading--hero">
    <h1 class="heading--hero__heading">Heading Hero</h1>
    <p class="heading--hero__subheading">Lorem ipsum dolor</p>
</header>


<!-- 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>


<!-- Headingsection -->
<header class="heading--section">
    <h1 class="heading--section__heading">Heading - Section</h1>
    <p class="heading--section__subheading">Lorem ipsum dolor</p>
</header>


<!-- Headingsectionsmall -->
<header class="heading--section--small">
    <h1 class="heading--section--small__heading">Heading - Section - Small</h1>
    <p class="heading--section--small__subheading">Lorem ipsum dolor</p>
</header>


<!-- Headingsectionwsubhead -->
<header class="heading--section--w-subhead">
    <h1 class="heading--section--w-subhead__heading">Heading - Section w Subhead</h1>
    <p class="heading--section--w-subhead__subheading">Lorem ipsum dolor</p>
</header>


<!-- Headingitem -->
<header class="heading--item">
    <h1 class="heading--item__heading">Heading Item</h1>
    <p class="heading--item__subheading">Lorem ipsum dolor</p>
</header>


<!-- Headingsmall -->
<header class="heading--small">
    <h1 class="heading--small__heading">Heading Small</h1>
    <p class="heading--small__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>
 
/* Headinghero */
{
  "order": 1,
  "heading-type": "Heading Hero",
  "heading-class": "heading--hero"
}


/* Headingheroxl */
{
  "order": 1,
  "heading-type": "Heading Hero XL",
  "heading-class": "heading--hero--xl"
}


/* Headingsection */
{
  "order": 1,
  "heading-type": "Heading - Section",
  "heading-class": "heading--section"
}


/* Headingsectionsmall */
{
  "order": 1,
  "heading-type": "Heading - Section - Small",
  "heading-class": "heading--section--small"
}


/* Headingsectionwsubhead */
{
  "order": 1,
  "heading-type": "Heading - Section w Subhead",
  "heading-class": "heading--section--w-subhead"
}


/* Headingitem */
{
  "order": 1,
  "heading-type": "Heading Item",
  "heading-class": "heading--item"
}


/* Headingsmall */
{
  "order": 1,
  "heading-type": "Heading Small",
  "heading-class": "heading--small"
}
  • 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