England Football

Article Header 

<div class="article-page__header">
    <div class="published-date">Published 05 March 2021<span>4 minutes read</span></div>
    <div class="article-page__header--tag">First team</div>
    <h1 class="heading-section ">Gareth Southgate&#x27;s tribute to junior game as he lauds emergence of attacking talent</h1>
    <div class="article-page__header--author">
        <p>Written by:</p>
        <p>FA Communications department</p>
    </div>
</div>

No notes defined.

{
  "publishedDate": "Published 05 March 2021",
  "readLength": "4 minutes",
  "tag": "First team",
  "title": {
    "copy": "Gareth Southgate's tribute to junior game as he lauds emergence of attacking talent",
    "tag": "h1"
  },
  "writtenBy": "FA Communications department"
}
  • Content: 
    .article-page__header, // We should aim to remove this class when we can
.article__header {
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 3.6rem;

  .published-date {
    @include text-s;

    font-size: 1.6rem;
    color: $color-interface-light;
    font-weight: 400;
    span {
      display: block;
      margin-top: 0.4rem;

      @media screen and (min-width: $mq-medium) {
        display: inline-block;

        &::before {
          content: '•';
          margin: 0 0.8rem;
        }
      }
    }
  }
  &--tag {
    @extend .p-1;

    background: var(--brand-primary);
    border-radius: 6rem;
    color: $white;
    padding: 0.6rem 2.6rem;
    display: inline-block;
    margin-top: 1.6rem;
    text-transform: uppercase;
  }
  &--author {
    @include text-m;

    margin-top: 2rem;
  }
  h1 {
    margin-top: 1.6rem;
  }

  @media screen and (max-width: $mq-small) {
    &--author {
      @include text-s;
    }
  }
}
  • URL: /components/raw/article-header/article-header.scss
  • Filesystem Path: src/library/modules/article-header/article-header.scss
  • Size: 946 Bytes 
<div class="article-page__header">
  <div class="published-date">{{publishedDate}}<span>{{readLength}} read</span></div>
  <div class="article-page__header--tag">{{tag}}</div>
  {{render '@heading--section' title merge=true}}
  <div class="article-page__header--author">
    <p>Written by:</p>
    <p>{{writtenBy}}</p>
  </div>
</div>