England Football

Article News Card: Default 

<div class="article-news-card " id="mens-senior" data-content="news-content" role="region" aria-label="men&#x27;s senior">
    <div class="article-news-card__header  ">
        <h2 class="article-news-card__title">men&#x27;s senior</h2>
        <a href="#" class="article-news-card__view-button">view all</a>
    </div>

    <div class="article-news-card__single-vertical">
        <div class="article-news-card__single">
            <a href="#" class="news-card news-card--single " data-poster-image="/assets/example-content/autoplay-hero-error.png">
                <div class="news-card__image">
                    <img src="/assets/example-content/news-single.jpg" />
                    <div class="news-card__image--time">5 min<span> read</span></div>
                </div>
                <div class="news-card__content">
                    <div class="news-card__content--title">men&#x27;s senior</div>
                    <p class="news-card__content--description">Black History Month: Tony Collins - the first black manager in the English Football League</p>
                    <hr />
                    <div class="news-card__content--date-wrap">
                        <span class="date">11 Oct 2020</span>
                    </div>
                </div>
            </a>
        </div>
        <div class="article-news-card__vertical">
            <a href="#" class="news-card news-card--vertical " data-poster-image="/assets/example-content/autoplay-hero-error.png">
                <div class="news-card__image">
                    <img src="/assets/example-content/news-vertical-1.jpg" />
                    <div class="news-card__image--time">5 min<span> read</span></div>
                </div>
                <div class="news-card__content">
                    <div class="news-card__content--title">men&#x27;s senior</div>
                    <p class="news-card__content--description">Manchester United can make English football history in the Champions League against</p>
                    <hr />
                    <div class="news-card__content--date-wrap">
                        <span class="date">11 Oct 2020</span>
                    </div>
                </div>
            </a>
            <a href="#" class="news-card news-card--vertical " data-poster-image="/assets/example-content/autoplay-hero-error.png">
                <div class="news-card__image">
                    <img src="/assets/example-content/news-vertical-1.jpg" />
                    <div class="news-card__image--time">5 min<span> read</span></div>
                </div>
                <div class="news-card__content">
                    <div class="news-card__content--title">men&#x27;s senior</div>
                    <p class="news-card__content--description">Manchester United can make English football history in the Champions League against</p>
                    <hr />
                    <div class="news-card__content--date-wrap">
                        <span class="date">11 Oct 2020</span>
                    </div>
                </div>
            </a>
            <a href="#" class="news-card news-card--vertical " data-poster-image="/assets/example-content/autoplay-hero-error.png">
                <div class="news-card__image">
                    <img src="/assets/example-content/news-vertical-1.jpg" />
                    <div class="news-card__image--time">5 min<span> read</span></div>
                </div>
                <div class="news-card__content">
                    <div class="news-card__content--title">men&#x27;s senior</div>
                    <p class="news-card__content--description">Manchester United can make English football history in the Champions League against</p>
                    <hr />
                    <div class="news-card__content--date-wrap">
                        <span class="date">11 Oct 2020</span>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="article-news-card__horizontal">
        <a href="#" class="news-card news-card--horizontal " data-poster-image="/assets/example-content/autoplay-hero-error.png">
            <div class="news-card__image">
                <img src="/assets/example-content/news-horizontal-1.jpg" />
                <div class="news-card__image--time">12 min<span> read</span></div>
            </div>
            <div class="news-card__content">
                <div class="news-card__content--title">men&#x27;s senior</div>
                <p class="news-card__content--description">Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance</p>
                <hr />
                <div class="news-card__content--date-wrap">
                    <span class="date">11 Oct 2020</span>
                </div>
            </div>
        </a>
        <a href="#" class="news-card news-card--horizontal " data-poster-image="/assets/example-content/autoplay-hero-error.png">
            <div class="news-card__image">
                <img src="/assets/example-content/news-horizontal-1.jpg" />
                <div class="news-card__image--time">12 min<span> read</span></div>
            </div>
            <div class="news-card__content">
                <div class="news-card__content--title">men&#x27;s senior</div>
                <p class="news-card__content--description">Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance</p>
                <hr />
                <div class="news-card__content--date-wrap">
                    <span class="date">11 Oct 2020</span>
                </div>
            </div>
        </a>
        <a href="#" class="news-card news-card--horizontal " data-poster-image="/assets/example-content/autoplay-hero-error.png">
            <div class="news-card__image">
                <img src="/assets/example-content/news-horizontal-1.jpg" />
                <div class="news-card__image--time">12 min<span> read</span></div>
            </div>
            <div class="news-card__content">
                <div class="news-card__content--title">men&#x27;s senior</div>
                <p class="news-card__content--description">Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance</p>
                <hr />
                <div class="news-card__content--date-wrap">
                    <span class="date">11 Oct 2020</span>
                </div>
            </div>
        </a>
        <a href="#" class="news-card news-card--horizontal " data-poster-image="/assets/example-content/autoplay-hero-error.png">
            <div class="news-card__image">
                <img src="/assets/example-content/news-horizontal-1.jpg" />
                <div class="news-card__image--time">12 min<span> read</span></div>
            </div>
            <div class="news-card__content">
                <div class="news-card__content--title">men&#x27;s senior</div>
                <p class="news-card__content--description">Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance</p>
                <hr />
                <div class="news-card__content--date-wrap">
                    <span class="date">11 Oct 2020</span>
                </div>
            </div>
        </a>
    </div>
</div>

No notes defined.

{
  "id": "mens-senior",
  "title": "men's senior",
  "isHorizontalOnly": false,
  "articleTitle": false,
  "isHorizontalOnlyEight": true,
  "data": [
    {
      "title": "men's senior",
      "image": "/assets/example-content/news-horizontal-1.jpg",
      "description": "Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance",
      "date": "11 Oct 2020",
      "time": "12 mins",
      "href": "/"
    },
    {
      "title": "sponsored",
      "image": "/assets/example-content/news-horizontal-2.jpg",
      "description": "Growing Up: Joe Gomez",
      "date": "11 Oct 2020",
      "time": "2 mins",
      "href": "/"
    },
    {
      "title": "men's senior",
      "image": "/assets/example-content/news-horizontal-3.jpg",
      "description": "27 of the best gifts for England football fans in 2021",
      "date": "11 Oct 2020",
      "time": "5 mins",
      "href": "/"
    },
    {
      "title": "men's senior",
      "image": "/assets/example-content/news-horizontal-4.jpg",
      "description": "Middlesbrough: Neil Warnock breaks record for most games managed in English professional",
      "date": "11 Oct 2020",
      "time": "5 mins",
      "href": "/"
    },
    {
      "title": "men's senior",
      "image": "/assets/example-content/news-single.jpg",
      "description": "Black History Month:Tony Collins - the first black manager in the English Football League",
      "date": "11 Oct 2020",
      "time": "5 mins",
      "href": "/"
    },
    {
      "title": "men's senior",
      "image": "/assets/example-content/news-vertical-1.jpg",
      "description": "Manchester United can make English football history in the Champions League against",
      "date": "11 Oct 2020",
      "time": "5 mins",
      "href": "/"
    },
    {
      "title": "men's senior",
      "image": "/assets/example-content/news-vertical-2.jpg",
      "description": "England fail to ignite at Wembley and Scotland leave it late – Football Weekly",
      "date": "11 Oct 2020",
      "time": "11 mins",
      "href": "/"
    },
    {
      "title": "men's senior",
      "image": "/assets/example-content/news-vertical-3.jpg",
      "description": "England v Hungary: Crowd trouble early on in Wembley qualifier",
      "date": "11 Oct 2020",
      "time": "3 mins",
      "href": "/"
    }
  ]
}
  • Content: 
    .article-news-card {
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 3.2rem 0;
  &__title {
    font-family: var(--brand-heading--font-family);
    font-size: 4rem;
    line-height: 4.4rem;
    font-style: var(--brand-heading-3--font-style);
    font-weight: var(--brand-heading-3--font-weight);
    letter-spacing: 0.02em;
    color: $color-interface-light;
    padding-bottom: 0.8rem;
    position: relative;
    text-transform: capitalize;
    &::after {
      content: '';
      position: absolute;
      height: 0.4rem;
      background-color: $bold-red;
      width: 100%;
      display: block;
      bottom: 0;
      z-index: 1;
    }
  }
  &__view-button {
    font-family: var(--brand-text--font-family);
    font-size: 1.4rem;
    line-height: 4.4rem;
    color: $color-interface-light;
    text-transform: uppercase;
    text-decoration: none;
    &::after {
      content: '';
      width: 2.2rem;
      height: 2.2rem;
      display: inline-block;
      background: url('./assets/images/view-all-arrow.svg') no-repeat center;
      position: relative;
      top: 0.6rem;
      left: 0.7rem;
    }
    &:hover {
      color: $blue;
    }
  }
  &__header {
    width: 100%;
    max-width: calc(100% - 3.2rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 2.6rem;
    text-transform: uppercase;
    position: relative;
    &::after {
      content: '';
      height: 0.4rem;
      width: 100%;
      display: block;
      background-color: rgba(187, 193, 206, 0.5);
      position: absolute;
      bottom: 0;
    }
    &.white-font {
      .article-news-card__title {
        color: $white;
      }
      .article-news-card__view-button {
        color: $white;
        &::after {
          background: url('./assets/images/view-all-arrow-white.svg') no-repeat
            center;
        }
      }
      &::after {
        background-color: rgba(187, 193, 206, 1);
      }
    }
    &.white-highlighter {
      .article-news-card__title {
        &::after {
          background-color: $white;
        }
      }
      &::after {
        background-color: rgba(187, 193, 206, 0.4);
      }
    }
  }
  &__single-vertical {
    padding: 0 1.6rem;
  }
  &--section-bg {
    padding: 3.2rem 0;
  }
  &__horizontal {
    padding: 0 1.6rem;
    &.horizontal-mobile-hide {
      display: none;
    }
  }
  &__vertical {
    margin-top: 0.8rem;
  }

  @media screen and (min-width: $mq-medium) {
    &__header {
      max-width: 114.4rem;
    }
    &__single-vertical {
      display: flex;
      margin: 0 auto;
      margin-bottom: 2.4rem;
      width: 100%;
      max-width: 114.4rem;
      column-gap: 1.6rem;
      padding: 0;
    }
    &__title {
      font-size: 4.4rem;
      padding-bottom: 1.1rem;
    }
    &__horizontal {
      display: flex;
      width: 100%;
      max-width: 114.4rem;
      column-gap: 1.6rem;
      margin: 0 auto;
      padding: 0;
      &.horizontal-mobile-hide {
        display: flex;
      }
    }
    &__vertical {
      margin-top: 0;
    }
  }
}

/* stylelint-disable no-descending-specificity */
[data-brand=''],
[data-brand='englandfootball'],
[data-brand='englandfootball--supplimentary'] {
  .article-news-card__title {
    font-size: 2.8rem;
    line-height: 2.6rem;
    letter-spacing: -0.01em;
    color: $blue;
    padding-bottom: 1.2rem;
    &::after {
      bottom: -0.2rem;
    }

    @media screen and (min-width: $mq-medium) {
      font-size: 4.8rem;
      padding-bottom: 1.3rem;
      line-height: 4.2rem;
      letter-spacing: -0.02em;
      &::after {
        bottom: 0;
      }
    }
  }
  .article-news-card__view-button {
    line-height: 1.8rem;
  }
}
  • URL: /components/raw/article-news-card/article-news-card.scss
  • Filesystem Path: src/library/modules/article-news-card/article-news-card.scss
  • Size: 3.7 KB 
<div class="article-news-card {{#if section-bg}}article-news-card--section-bg{{/if}}" id="{{id}}" data-content="news-content" role="region" aria-label="{{title}}" {{#if section-bg}}style="background-image: url({{section-bg-img}});"{{/if}}>
    {{#unless articleTitle}}
    <div class="article-news-card__header {{#if white-font}}white-font{{/if}} {{#if white-highlighter}}white-highlighter{{/if}}">
        <h2 class="article-news-card__title">{{title}}</h2>
        <a href="#" class="article-news-card__view-button">view all</a>
    </div>
    {{/unless}}
    
    {{#unless isHorizontalOnly}}
    <div class="article-news-card__single-vertical">
        <div class="article-news-card__single">
            {{render '@news-card--single-news-card'}}
        </div>
        <div class="article-news-card__vertical">
            {{render '@news-card--vertical-news-card'}}
            {{render '@news-card--vertical-news-card'}}
            {{render '@news-card--vertical-news-card'}}   
        </div>
    </div>
    {{/unless}}
    {{#if video-card}}
        <div class="article-news-card__horizontal {{#if horizontalMobileHide}}horizontal-mobile-hide{{/if}}">
            {{render '@news-card--youtube-video'}}
            {{render '@news-card--youtube-video'}}
            {{render '@news-card--vimeo-video'}}
            {{render '@news-card--vimeo-video'}}
        </div>
    {{/if}}
    {{#unless video-card}}
        <div class="article-news-card__horizontal">
            {{render '@news-card'}}
            {{render '@news-card'}}
            {{render '@news-card'}}
            {{render '@news-card'}}
        </div>
    {{/unless}}
    {{#unless isHorizontalOnlyEight}}
    <div class="article-news-card__horizontal">
        {{render '@news-card'}}
        {{render '@news-card'}}
        {{render '@news-card'}}
        {{render '@news-card'}}
    </div>
    {{/unless}}
</div>