England Football

Article Header 

<div class="article-header">
    <div class="article-header__category" data-category="Get Started">Interview</div>
    <h1><span class="jumpTohide">Gareth Southgate: I want the players to play with freedom</span></h1>
    <p>Gareth Southgate tells Peter Glynn that he wants young english players to have the freedom to express themselves</p>
</div>

No notes defined.

{
  "category": "Interview",
  "heading": "Gareth Southgate: I want the players to play with freedom",
  "subheading": "Gareth Southgate tells Peter Glynn that he wants young english players to have the freedom to express themselves"
}
  • Content: 
    export default parentElement => {
  const categoryElement = parentElement.querySelector(
    '.article-header__category'
  );
  const dataCategory = categoryElement.getAttribute('data-category');

  if (dataCategory) {
    categoryElement.innerText = dataCategory;
  }
};
  • URL: /components/raw/article-header/article-header.js
  • Filesystem Path: src/library/components/article-header/article-header.js
  • Size: 272 Bytes
  • Content: 
    .article-header {
  &__category {
    display: inline;
    font-family: $text-font-ef;
    color: $color-interface-light;
    font-style: normal;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.2rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 2px solid $red;
    padding-bottom: 0.08rem;
  }

  h1 {
    font-family: $text-font-ef;
    font-style: normal;
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 3.6rem;
    color: $color-primary;
    margin-top: 1.2rem;
  }

  p {
    font-family: $text-font-ef;
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.8rem;
    text-align: left;
    color: $color-interface-light;
    margin-top: 0.8rem;
  }

  @media screen and (min-width: $mq-medium) {
    max-width: 58.5rem;
    &__category {
      font-size: 1.6rem;
      line-height: 2rem;
    }
    h1 {
      font-size: 4.2rem;
      line-height: 4rem;
      margin-top: 1.6rem;
    }
  }
}
  • URL: /components/raw/article-header/article-header.scss
  • Filesystem Path: src/library/components/article-header/article-header.scss
  • Size: 1 KB 
<div class="article-header">
  <div class="article-header__category" data-category="Get Started">{{category}}</div>
  <h1><span class="jumpTohide">{{heading}}</span></h1>
  <p>{{subheading}}</p>
</div>