<div class="grassroot-news-landing-page" style="background-image: url(/assets/example-content/grassroot-news-bg.png);">
<div class="news-page__header">
<div class="news-landing-back-button__back">
<a href="#">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">Grassroots News</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 sollicitudin sed, faucibus id sapien. Cras porta condimentum turpis, quis tincidunt turpis tempus ut.</p>
</div>
</div>
</div>
</div>
<div class="news-navbar" data-behaviour="news-navbar">
<div class="news-navbar__wrapper">
<nav class="news-navbar__nav-list" data-behavior="news-navbar--nav-list">
<a href="#club-section" data-nav-to="club-section" class="club-section">
Club Section
</a>
<a href="#casual-section" data-nav-to="casual-section" class="casual-section">
Casual Section
</a>
<a href="#participate-section" data-nav-to="participate-section" class="participate-section">
Participate
</a>
<a href="#play-section" data-nav-to="play-section" class="play-section">
Let Girl’s Play
</a>
</nav>
</div>
</div>
<div class="article-news-card article-news-card--section-bg" id="club-section" data-content="news-content" role="region" aria-label="Club Football" style="background-image: url(/assets/example-content/news-article-bkgnd-youth.png);">
<div class="article-news-card__header ">
<h2 class="article-news-card__title">Club Football</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'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>
<div class="article-news-card article-news-card--section-bg" id="casual-section" data-content="news-content" role="region" aria-label="Casual Football" style="background-image: url(/assets/example-content/news-article-bkgnd-womens.png);">
<div class="article-news-card__header ">
<h2 class="article-news-card__title">Casual Football</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'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>
<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 article-news-card--section-bg" id="participate-section" data-content="news-content" role="region" aria-label="Participate" style="background-image: url(/assets/example-content/news-article-bkgnd-youth.png);">
<div class="article-news-card__header ">
<h2 class="article-news-card__title">Participate</h2>
<a href="#" class="article-news-card__view-button">view all</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="article-news-card article-news-card--section-bg" id="play-section" data-content="news-content" role="region" aria-label="Let Girl’s Play" style="background-image: url(/assets/example-content/news-article-bkgnd-let-girls-play.png);">
<div class="article-news-card__header white-font ">
<h2 class="article-news-card__title">Let Girl’s Play</h2>
<a href="#" class="article-news-card__view-button">view all</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>
No notes defined.
{
"banner": {
"heading": "Grassroots News",
"copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras magna ligula, imperdiet ac sollicitudin sed, faucibus id sapien. Cras porta condimentum turpis, quis tincidunt turpis tempus ut."
},
"nav-bar": {
"data": [
{
"title": "Club Section",
"id": "club-section"
},
{
"title": "Casual Section",
"id": "casual-section"
},
{
"title": "Participate",
"id": "participate-section"
},
{
"title": "Let Girl’s Play",
"id": "play-section"
}
]
},
"club-section": {
"id": "club-section",
"section-bg": true,
"title": "Club Football",
"section-bg-img": "/assets/example-content/news-article-bkgnd-youth.png"
},
"casual-section": {
"id": "casual-section",
"section-bg": true,
"title": "Casual Football",
"section-bg-img": "/assets/example-content/news-article-bkgnd-womens.png"
},
"participate-section": {
"section-bg": true,
"title": "Participate",
"isHorizontalOnly": true,
"section-bg-img": "/assets/example-content/news-article-bkgnd-youth.png",
"id": "participate-section"
},
"play-section": {
"section-bg": true,
"title": "Let Girl’s Play",
"isHorizontalOnly": true,
"section-bg-img": "/assets/example-content/news-article-bkgnd-let-girls-play.png",
"id": "play-section",
"white-font": true
}
}
.grassroot-news-landing-page {
@media screen and (min-width: $mq-small) {
&__navlinks {
padding-bottom: 5.2rem;
}
}
}
<div class="grassroot-news-landing-page" style="background-image: url(/assets/example-content/grassroot-news-bg.png);">
<div class="news-page__header">
{{render '@news-landing-back-button'}}
<div class="container">
<div class="common-template__row-container">
{{render '@content-manageable-banner' banner merge="true"}}
</div>
</div>
</div>
{{render '@news-navbar' nav-bar merge="true"}}
{{render '@article-news-card' club-section merge="true"}}
{{render '@article-news-card' casual-section merge="true"}}
{{render '@full-width-image-signpost'}}
{{render '@article-news-card' participate-section merge="true"}}
{{render '@article-news-card' play-section merge="true"}}
</div>