England Football

Global Rte: Article Header 

<div class="global-rte-content">
    <h2><span class="articleHeader">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span></h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
    <a href="#">Hyperlink text to access the next page</a>

    <ul>
        <li>Lorem ipsum dolor sit amet, consectetur</li>
        <li>Lorem ipsum dolor sit amet, consectetur</li>
        <li>Lorem ipsum dolor sit amet, consectetur</li>
        <li>Lorem ipsum dolor sit amet, consectetur</li>
    </ul>
    <p><em>Lorem ipsum dolor sit amet, consectetur</em></p>
</div>

No notes defined.

{
  "tag": "h2",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
  "modifier": "articleHeader"
}
  • Content: 
    @mixin rte {
  color: $color-interface-light;

  @extend .p-large;
  a {
    color: $blue-accent;
    text-decoration: underline;

    &:hover {
      color: $blue;
    }
  }

  strong {
    font-weight: bold;
    color: $blue;
  }

  em {
    font-style: italic !important;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    color: $blue;
    margin-bottom: 2.4rem;
    & > span.articleHeader {
      &::after {
        content: '';
        padding-top: 0.8rem;
        display: block;
        width: 3.2rem;
        height: 0.2rem;
        border-bottom: 2px solid #e1261c;
      }
    }
  }

  p {
    @extend .p-large;
  }

  h1 {
    @extend .heading-1;
  }

  h2 {
    @extend .heading-2;
  }

  h3 {
    @extend .heading-3;
  }

  h4 {
    @extend .heading-4;
  }

  h5 {
    @extend .heading-5;
  }

  p:last-child {
    margin-bottom: 0;
  }
  ul {
    list-style: disc;
  }
  ol {
    list-style: decimal;
  }
  ol[type='i'] {
    list-style: lower-roman;
  }
  ol[type='I'] {
    list-style: upper-roman;
  }
  ol[type='a'] {
    list-style: lower-alpha;
  }
  ol[type='A'] {
    list-style: upper-alpha;
  }
  ul,
  ol {
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 4rem;
    li {
      @extend .p-large;
    }
  }
}

.global-rte-content {
  color: $color-interface-light;
  font: $p-1;

  @include rte();
}

[data-brand='englandfootball'],
[data-brand='englandfootball--supplimentary'],
[data-brand='mens'],
[data-brand='womens'] {
  .global-rte-content {
    font: $p-1;
    p {
      font: $p-1;
    }
    h1 {
      font: $heading-1;
    }
    h2 {
      font: $heading-2;
    }
    h3 {
      font: $heading-3;
    }
    h4 {
      font: $heading-4;
    }
    h5 {
      font: $heading-5;
    }
    ul {
      list-style: disc;
    }
    ol {
      list-style: decimal;
    }
    ol[type='i'] {
      list-style: lower-roman;
    }
    ol[type='I'] {
      list-style: upper-roman;
    }
    ol[type='a'] {
      list-style: lower-alpha;
    }
    ol[type='A'] {
      list-style: upper-alpha;
    }
    ul,
    ol {
      margin-block-start: 1em;
      margin-block-end: 1em;
      padding-inline-start: 4rem;
      li {
        font: $p-1;
      }
    }
  }
}
  • URL: /components/raw/global-rte/global-rte.scss
  • Filesystem Path: src/library/components/text/global-rte/global-rte.scss
  • Size: 2.2 KB 
<div class="global-rte-content">
  <{{tag}}>{{#if modifier}}<span class="{{modifier}}">{{/if}}{{text}}{{#if modifier}}</span>{{/if}}</{{tag}}>
  <p>{{text}}</p>
  <a href="#">Hyperlink text to access the next page</a>

  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur</li>
    <li>Lorem ipsum dolor sit amet, consectetur</li>
    <li>Lorem ipsum dolor sit amet, consectetur</li>
    <li>Lorem ipsum dolor sit amet, consectetur</li>
  </ul>
  <p><em>Lorem ipsum dolor sit amet, consectetur</em></p>
</div>