<div class="teams-news-landing-page view-all-news-page" data-behaviour="view-all-news-card">
<div class="news-page__header" style="background-image: url(/assets/example-content/england-teams-lion-bg.png);">
<div class="news-landing-back-button__back">
<a href="#">England Teams News</a>
</div>
<div class="news-landing-back-button__line"></div>
<div class="container">
<div class="common-template__row-container">
<div class="content-managable-banner">
<div class="content-managable-banner__heading-block">
<h1 class="content-managable-banner__heading">Men's Senior</h1>
<ul>
<li>
<noscript class="loading-lazy">
<img src="/assets/example-content/red-lion-small.svg" alt="" loading="lazy" />
</noscript>
</li>
<li>
<noscript class="loading-lazy">
<img src="/assets/example-content/red-lion-small.svg" alt="" loading="lazy" />
</noscript>
</li>
<li>
<noscript class="loading-lazy">
<img src="/assets/example-content/red-lion-small.svg" alt="" loading="lazy" />
</noscript>
</li>
</ul>
</div>
<p class="content-managable-banner__copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras magna ligula, imperdiet ac</p>
</div>
</div>
</div>
</div>
<div class="article-news-card " id="single-vertical-section" data-content="news-content" role="region" aria-label="men's senior">
<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'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'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'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'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'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'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'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'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 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'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'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'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'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>
<section class="fullwidth-imagesignpost">
<div class="fullwidth-imagesignpost__outer">
<div class="fullwidth-imagesignpost__infoblock">
<img src="/assets/example-content/bkgnd-red.png" />
<div class="fullwidth-imagesignpost__content">
<h3>LATEST GRASSROOTS NEWS AND VIDEO</h3>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras magna ligula, imperdiet ac sollicitud</p>
<a href="/" class="cta cta--primary ">
<p>View All</p>
</a>
</div>
</div>
<div class="fullwidth-imagesignpost__imgwrapper">
<img src="/assets/example-content/Vector-red.png" class="fullwidth-imagesignpost__vector" />
<img src="/assets/example-content/right-image.png" class="fullwidth-imagesignpost__rightimg" />
</div>
</div>
</section>
<div class="article-news-card " id="horizontal-section" data-content="news-content" role="region" aria-label="men's senior">
<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'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'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'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'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 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'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'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'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'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>
<section class="fullwidth-imagesignpost">
<div class="fullwidth-imagesignpost__outer">
<div class="fullwidth-imagesignpost__infoblock">
<img src="/assets/example-content/bkgnd-red.png" />
<div class="fullwidth-imagesignpost__content">
<h3>LATEST GRASSROOTS NEWS AND VIDEO</h3>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras magna ligula, imperdiet ac sollicitud</p>
<a href="/" class="cta cta--primary ">
<p>View All</p>
</a>
</div>
</div>
<div class="fullwidth-imagesignpost__imgwrapper">
<img src="/assets/example-content/Vector-red.png" class="fullwidth-imagesignpost__vector" />
<img src="/assets/example-content/right-image.png" class="fullwidth-imagesignpost__rightimg" />
</div>
</div>
</section>
<div class="view-all-news-page__horizontal" id="news-articles">
<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'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'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'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'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 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'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'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'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'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 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'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'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'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'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 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'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'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'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'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 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'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'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'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'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 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'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'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'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'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>
<div class="loadmore">
<a href="javascript:void(0);" class="cta cta--primary " id="loadbutton">
<p>Load More</p>
</a>
</div>
<div class="loading">
<div class="ball-loader">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
</div>
</div>
No notes defined.
{
"header": {
"title": "England Teams News"
},
"banner": {
"heading": "Men's Senior",
"copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras magna ligula, imperdiet ac"
},
"Load-more-cta": {
"copy": "Load More",
"id": "loadbutton",
"href": "javascript:void(0);"
},
"single-vertical-section": {
"articleTitle": true,
"isHorizontalOnlyEight": false,
"id": "single-vertical-section"
},
"horizontal-section": {
"articleTitle": true,
"isHorizontalOnly": true,
"isHorizontalOnlyEight": false,
"id": "horizontal-section"
}
}
export default parentElement => {
const loading = parentElement.querySelector('.loading');
const allNewsItems = parentElement.querySelectorAll(
'.view-all-news-page__horizontal > div'
);
const totalPage = allNewsItems.length;
let currentPage = 1;
const MOBILE_BREAKPOINT = 820;
allNewsItems.forEach(item => {
item.classList.add('hidden');
});
const removeLoading = () => {
loading.classList.remove('show');
};
const showLoading = () => {
loading.classList.add('show');
};
window.addEventListener('scroll', () => {
const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
// console.log( { scrollTop, scrollHeight, clientHeight });
if (window.innerWidth > MOBILE_BREAKPOINT) {
if (
clientHeight + scrollTop >= scrollHeight - 5 &&
currentPage < totalPage
) {
showLoading();
setTimeout(() => {
document
.querySelector(
`.view-all-news-page__horizontal > div:nth-child(${currentPage})`
)
.classList.remove('hidden');
// eslint-disable-next-line operator-assignment
currentPage = currentPage + 1;
removeLoading();
}, 100);
}
} else {
document.getElementById('loadbutton').onclick = () => {
if (currentPage <= totalPage) {
showLoading();
setTimeout(() => {
document
.querySelector(
`.view-all-news-page__horizontal > div:nth-child(${currentPage})`
)
.classList.remove('hidden');
// eslint-disable-next-line operator-assignment
currentPage = currentPage + 1;
removeLoading();
}, 100);
}
if (currentPage > totalPage) {
parentElement.querySelector('.loadmore').classList.add('hidden');
}
};
}
});
};
.view-all-news-page {
.news-page__header {
background-color: $crest-blue;
position: relative;
background-size: cover;
&::before {
content: '';
background: url('./assets/example-content/teams-view-all-down-arrow.svg')
no-repeat center;
padding: 0.9rem 1rem;
display: block;
position: absolute;
left: 32%;
right: 68%;
width: 12.2rem;
height: 3.5rem;
bottom: -28px;
}
.news-landing-back-button__back > a {
color: $white;
&::before {
background: url('./assets/images/view-all-arrow-white.svg') no-repeat
center;
}
}
.content-managable-banner__heading,
.content-managable-banner__copy {
color: $white;
}
}
.article-news-card__horizontal {
&:last-child {
padding-top: 0.8rem;
}
}
&__horizontal {
margin: 5.2rem 1.5rem;
}
@media screen and (min-width: $mq-medium) {
.news-page__header {
&::before {
content: '';
left: 47%;
right: 53%;
}
}
.article-news-card__horizontal {
&:last-child {
padding-top: 2.4rem;
}
}
&__horizontal {
display: flex;
flex-wrap: wrap;
width: 100%;
max-width: 114.4rem;
column-gap: 1.6rem;
row-gap: 2.3rem;
margin: 8.8rem auto;
padding: 0;
}
.ball-loader {
display: flex;
justify-content: center;
background: $grey;
opacity: 0.5;
width: 27.1rem;
align-items: center;
height: 4rem;
}
.loading {
opacity: 0;
}
.loading.show {
opacity: 1;
margin: 0 auto;
max-width: 27.1rem;
width: 100%;
padding-bottom: 7.2rem;
}
.ball {
background-color: $white;
border-radius: 50%;
margin: 5px;
height: 6px;
width: 6px;
animation: jump 0.7s ease-in infinite;
&:nth-of-type(2) {
animation-delay: 0.1s;
}
&:nth-of-type(3) {
animation-delay: 0.2s;
}
}
@keyframes jump {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
}
}
.loadmore {
display: none;
}
@media screen and (max-width: $mq-medium) {
.loadmore {
display: block;
padding-bottom: 7.2rem;
.cta {
margin: 0 auto;
max-width: 25.5rem;
border-radius: 2px;
background-color: $red;
color: white;
}
}
}
<div class="teams-news-landing-page view-all-news-page" data-behaviour="view-all-news-card">
<div class="news-page__header" style="background-image: url(/assets/example-content/england-teams-lion-bg.png);">
{{render '@news-landing-back-button' header merge="true"}}
<div class="container">
<div class="common-template__row-container">
{{render '@content-manageable-banner' banner merge="true"}}
</div>
</div>
</div>
{{render '@article-news-card' single-vertical-section merge="true"}}
{{render '@full-width-image-signpost'}}
{{render '@article-news-card' horizontal-section merge="true"}}
{{render '@full-width-image-signpost'}}
<div class="view-all-news-page__horizontal" id="news-articles">
<div class="article-news-card__horizontal">
{{render '@news-card'}}
{{render '@news-card'}}
{{render '@news-card'}}
{{render '@news-card'}}
</div>
<div class="article-news-card__horizontal">
{{render '@news-card'}}
{{render '@news-card'}}
{{render '@news-card'}}
{{render '@news-card'}}
</div>
<div class="article-news-card__horizontal">
{{render '@news-card'}}
{{render '@news-card'}}
{{render '@news-card'}}
{{render '@news-card'}}
</div>
<div class="article-news-card__horizontal">
{{render '@news-card'}}
{{render '@news-card'}}
{{render '@news-card'}}
{{render '@news-card'}}
</div>
<div class="article-news-card__horizontal">
{{render '@news-card'}}
{{render '@news-card'}}
{{render '@news-card'}}
{{render '@news-card'}}
</div>
<div class="article-news-card__horizontal">
{{render '@news-card'}}
{{render '@news-card'}}
{{render '@news-card'}}
{{render '@news-card'}}
</div>
</div>
<div class="loadmore">
{{render '@cta' Load-more-cta merge="true"}}
</div>
<div class="loading">
<div class="ball-loader">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
</div>
</div>