England Football

Text: S 

<p class="text-s ">This is s text</p>

These text styles can be used via the css class (.text-m), but are also available as mixins.

Usage:

Within Fractal

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

  {{render '@text--m' text merge=true}}
  • @text--m - use the component name text and then to access any variant use double hypens -- and the variant name m
  • Provide context to override the default (text)
  • 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="text-l">text 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 text-m;
    color: blue;
  }
{
  "tag": "p",
  "copy": "This is s text",
  "modifier": "s"
}
  • Content: 
    $text-font: 'Grot12', arial, helvetica, sans-serif;
$text-font2: 'FS Dillon', arial, helvetica, sans-serif;
// Added a new var, as this font is specific to the EF brand.
// TODO: Review areas $text-font2 is used, and update to either:
// - Reference this new $text-font-ef variable.
// - Use branding context to inherit the correct font.
$text-font-ef: 'FS Dillon', arial, helvetica, sans-serif;

@mixin text-l {
  font-family: $text-font;
  letter-spacing: 0.02em;
  font-size: 1.8rem;
  line-height: 4rem;
}

@mixin text-m {
  font-family: $text-font;
  letter-spacing: 0.02em;
  font-size: 1.6rem;
  line-height: 2.4rem;
}

@mixin text-s {
  font-family: $text-font;
  letter-spacing: 0.02em;
  font-size: 1.4rem;
  line-height: 2rem;
}

@mixin text-s--narrow {
  font-family: $text-font;
  letter-spacing: 0.02em;
  font-size: 1.4rem;
  line-height: 1.8rem;
}

@mixin text-xs {
  font-family: $text-font;
  letter-spacing: 0.02em;
  font-size: 1.2rem;
  line-height: 1.2rem;
}

.text {
  &-l {
    @include text-l;
  }
  &-m {
    @include text-m;
  }
  &-s {
    @include text-s;
  }
  &-xs--narrow {
    @include text-s--narrow;
  }
  &-xs {
    @include text-xs;
  }
}
  • URL: /components/raw/text/text.scss
  • Filesystem Path: src/library/components/text/text/text.scss
  • Size: 1.2 KB 
<{{tag}} class="text-{{modifier}} {{additionalClasses}}">{{copy}}</{{tag}}>