<div class="hero-section">
<div class="hero-section__partner-logos">
<img src="/assets/example-content/hero-partner-bt.png" alt="Nike" />
<img src="/assets/example-content/hero-partner-deliveroo.png" alt="BT" />
</div>
<h3 class="hero-section__title">Eight England outsiders making a case for Gareth Southgate's match against Iceland</h3>
<div class="hero-section__description">Lorem ipsum dolor sit amet, consectetur</div>
<div class="hero-section__cta">
<a href="/" class="cta cta--secondary ">
<p>Latest News</p>
</a>
</div>
</div>
No notes defined.
{
"logos": [
{
"alt": "Nike",
"logo": "/assets/example-content/hero-partner-bt.png"
},
{
"alt": "BT",
"logo": "/assets/example-content/hero-partner-deliveroo.png"
}
],
"title": "Eight England outsiders making a case for Gareth Southgate's match against Iceland",
"description": "Lorem ipsum dolor sit amet, consectetur",
"cta": {
"modifier": "secondary",
"copy": "Latest News"
}
}
.hero-section {
position: absolute;
display: flex;
flex-direction: column;
bottom: 5.8rem;
width: 100%;
padding: 0 2.4rem;
z-index: 11;
font-style: normal;
&__partner-logos {
display: flex;
justify-content: center;
margin-bottom: 1.8rem;
img {
border-left: 0.08rem solid $grey;
width: auto !important;
max-height: 2.9rem !important;
padding-left: 1.3rem;
&:first-child {
border-left: none;
padding-right: 1.3rem;
}
}
}
&__title {
font-family: var(--brand-text--font-family);
font-weight: 700;
font-size: 2.8rem;
line-height: 3rem;
text-align: center;
letter-spacing: -0.01em;
color: $white;
margin-bottom: 1.2rem;
}
&__description {
font-family: var(--brand-text--font-family);
color: $white;
font-weight: 400;
font-size: 2rem;
line-height: 2.2rem;
text-align: center;
letter-spacing: -0.02em;
margin-bottom: 1.8rem;
}
&__count-down {
font-family: var(--brand-text--font-family);
font-size: 1.5rem;
line-height: 1.6rem;
display: flex;
align-items: center;
text-align: center;
letter-spacing: 0.14em;
text-transform: uppercase;
color: $white;
justify-content: center;
margin-bottom: 1.8rem;
span {
padding-right: 0.5rem;
}
.days {
padding-right: 1rem;
}
.hours {
border-left: 0.2rem solid $white;
padding: 0 1rem;
}
.minutes {
border-left: 0.2rem solid $white;
border-right: 0.2rem solid $white;
padding: 0 1rem;
}
.seconds {
padding-left: 1rem;
}
}
&__cta {
display: flex;
justify-content: center;
align-items: center;
font-family: var(--brand-text--font-family);
margin: 0 auto;
.cta {
width: 23.4rem;
}
}
@media screen and (min-width: $mq-medium) {
bottom: 10.5rem;
max-width: 82.3rem;
padding: 0;
&__title {
font-size: 4.2rem;
line-height: 4rem;
margin-bottom: 1.8rem;
}
&__count-down {
font-size: 2rem;
}
}
}
<div class="hero-section">
<div class="hero-section__partner-logos">
{{#each logos}}
<img src="{{logo}}" alt="{{alt}}" />
{{/each}}
</div>
<h3 class="hero-section__title">{{title}}</h3>
<div class="hero-section__description">{{description}}</div>
{{#if countdown}}
<div class="hero-section__count-down">
<div class="days"><span>{{countdown.day}}</span>Days</div>
<div class="hours"><span>{{countdown.hours}}</span>Hours</div>
<div class="minutes"><span>{{countdown.minutes}}</span>Minutes</div>
<div class="seconds"><span>{{countdown.seconds}}</span>Seconds</div>
</div>
{{/if}}
{{#if cta}}
<div class="hero-section__cta">
{{render '@cta' cta merge=true }}
</div>
{{/if}}
</div>