<div class="article-news-card " id="mens-senior" data-content="news-content" role="region" aria-label="men's senior">
<div class="article-news-card__header ">
<h2 class="article-news-card__title">men's senior</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 news-card--video" data-behavior="video-lightbox" data-video-id="M7lc1UVf-VE" 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> video</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--horizontal news-card--video" data-behavior="video-lightbox" data-video-id="M7lc1UVf-VE" 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> video</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--horizontal news-card--video" data-behavior="vimeo-video-lightbox" data-video-id="545863177" 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> video</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--horizontal news-card--video" data-behavior="vimeo-video-lightbox" data-video-id="545863177" 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> video</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>
No notes defined.
{
"id": "mens-senior",
"title": "men's senior",
"isHorizontalOnly": true,
"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": "/"
}
],
"video-card": true
}
.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;
}
}
<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>