England Football

Heading: S 

<h2 class="heading-s ">This is the s heading</h2>

These headings can be used via the css class (.heading-xl), but are also available as mixins.

Usage:

Within Fractal

For use within the FE library only, you can include the heading component within any other component:

  {{render '@heading--m' component.heading merge="true" }}
  • @heading--l - use the component name heading and then to access any variant use double hypens -- and the variant name l
  • Provide context to override the default (component.heading)
  • Set merge=true to receive any other default context

With classes

This is how the style can be applied outside of the FE library:

  <p class="heading-l">Heading copy here</p>

Using the mixin

If you need to include the font styles within another component but extend or over-ride the styles, you can use the mixin within other scss files. Also useful if you want to integrate the styles without added a surplus class.

  .class {
    @include heading-l;
    color: blue;
  }

The heading-xl provides a smaller size for mobile devices. This currently breaks at 800px but may not work in all cases. When this happens you can use the mixin for each size to provide cover for your occurance:

  .class {
    @media (max-width: 1000px) {
      @include heading-xl-mobile;
    }
  }
{
  "tag": "h2",
  "copy": "This is the s heading",
  "modifier": "s"
}
  • Content: 
    $heading-font: 'England FC', arial, helvetica, sans-serif;

@mixin heading-xl-desktop {
  font-family: $heading-font;
  font-size: 14.8rem;
  line-height: 11.2rem;
  letter-spacing: 0.01em;
}

@mixin heading-xl-mobile {
  font-family: $heading-font;
  font-size: 24.8rem;
  line-height: 18.4rem;
  letter-spacing: 0.01em;
}

@mixin heading-xl-desktop {
  font-family: $heading-font;
  font-size: 14.8rem;
  line-height: 11.2rem;
  letter-spacing: 0.01em;
}

@mixin heading-l {
  font-family: $heading-font;
  font-size: 5.6rem;
  line-height: 4.4rem;
  letter-spacing: 0.01em;
}

@mixin heading-m {
  font-family: $heading-font;
  font-size: 4rem;
  line-height: 4.4rem;
  letter-spacing: 0.01em;
}

@mixin heading-s {
  font-family: $heading-font;
  font-size: 2.8rem;
  letter-spacing: 0.01em;
}

@mixin heading-decoration {
  @media screen and (min-width: $mq-medium) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;

    &::after {
      content: '';
      height: 0;
      border-bottom: 1px solid;
      flex: 1;
      margin-left: 10%;
      opacity: 0.6;
      color: $color-interface-light;
    }
  }
}

.heading {
  &-xl {
    @include heading-xl-mobile;

    @media screen and (min-width: 800px) {
      @include heading-xl-desktop;
    }
  }

  &-l {
    @include heading-l;
  }
  &-m {
    @include heading-m;
  }
  &-s {
    @include heading-s;
  }

  &--decorated {
    @include heading-decoration;
  }
}
  • URL: /components/raw/heading/heading.scss
  • Filesystem Path: src/library/components/text/heading/heading.scss
  • Size: 1.5 KB 
<{{tag}} class="heading-{{modifier}} {{extraClasses}}">{{copy}}</{{tag}}>