<div class="match-hub" style="background-image: url(/assets/example-content/match-hub-bg.jpg);">
<div class="match-hub__section">
<div class="match-hub__header ">
<h2 class="match-hub__title">World Cup 2022</h2>
<a href="#" class="match-hub__link">VISIT QATAR 2022 NEWS</a>
</div>
<div class="match-hub__tiles match-hub__tiles--five">
<div class="big-columns">
<a class="match-tile match-tile--big" target="_blank" href="/">
<div class="match-tile__image-bg">
<img src="/assets/example-content/match-hub-hero.png" />
</div>
<div class="match-tile__text">stadium guide</div>
</a>
</div>
<div class="small-columns">
<a class="match-tile match-tile--small" target="_blank" href="/">
<div class="match-tile__image-bg">
<img src="/assets/example-content/match-hub-hero.png" />
</div>
<div class="match-tile__text">stadium guide</div>
</a>
<a class="match-tile match-tile--small" target="_blank" href="/">
<div class="match-tile__image-bg">
<img src="/assets/example-content/match-hub-hero.png" />
</div>
<div class="match-tile__text">stadium guide</div>
</a>
<a class="match-tile match-tile--small" target="_blank" href="/">
<div class="match-tile__image-bg">
<img src="/assets/example-content/match-hub-hero.png" />
</div>
<div class="match-tile__text">stadium guide</div>
</a>
<a class="match-tile match-tile--small" target="_blank" href="/">
<div class="match-tile__image-bg">
<img src="/assets/example-content/match-hub-hero.png" />
</div>
<div class="match-tile__text">stadium guide</div>
</a>
</div>
</div>
<a href="#" class="match-hub__link mobile-link">VISIT QATAR 2022 NEWS</a>
</div>
</div>
No notes defined.
{
"title": "World Cup 2022",
"modifier": "five",
"isTwoColoumn": false,
"match-tile-big": [
{
"text": "Sed ut perspiciatis unde omnis iste natus error sit "
},
{
"text": "Sed ut perspiciatis unde omnis iste natus error sit "
}
],
"match-tile-small": [
{
"text": "Highlights"
},
{
"text": "latest news"
},
{
"text": "The World Cup Squad"
},
{
"text": "The Lions Den"
}
]
}
.match-hub {
background-position: center top;
background-repeat: no-repeat;
color: black;
background-size: cover;
&__header {
width: 100%;
max-width: 100%;
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: $grey;
position: absolute;
opacity: 0.3;
bottom: 0;
}
}
&__title {
font-family: $ef-font;
font-style: italic;
font-weight: 700;
font-size: 2.8rem;
line-height: 3rem;
letter-spacing: -0.01em;
color: $white;
padding-bottom: 0.8rem;
position: relative;
text-transform: capitalize;
&::after {
content: '';
position: absolute;
height: 0.4rem;
background-color: $white;
width: 100%;
display: block;
bottom: 0;
z-index: 1;
}
}
.match-hub__header.grey-font {
.match-hub__title {
color: $blue;
}
}
.match-hub__header.red-highlighter {
.match-hub__title::after {
background-color: $bold-red;
}
}
&__section {
padding: 3.2rem 1.6rem 2rem 1.6rem;
}
&__link {
display: none;
}
.mobile-link {
font-family: $ef-font;
font-weight: 400;
font-size: 1.8rem;
line-height: 2.6rem;
text-decoration: underline;
color: $white;
text-align: center;
display: block;
padding-bottom: 2rem;
}
&__tiles {
&--two {
display: flex;
flex-direction: column;
justify-content: center;
margin-bottom: 6.9rem;
row-gap: 3.2rem;
}
.big-columns {
margin-bottom: 2.4rem;
}
.small-columns {
display: grid;
grid-template-columns: auto auto;
justify-content: center;
grid-gap: 2.1rem;
margin-bottom: 3.4rem;
}
}
@media screen and (min-width: 920px) {
&__header {
max-width: 124.4rem;
}
&__title {
font-size: 4.8rem;
line-height: 4.2rem;
letter-spacing: -0.02em;
padding-bottom: 1.1rem;
}
&__link {
font-family: $ef-font;
font-weight: 400;
font-size: 1.8rem;
line-height: 2.6rem;
color: $white;
display: block;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.mobile-link {
display: none;
}
&__section {
padding: 5.2rem 4.4rem;
}
&__tiles {
&--two {
flex-direction: row;
margin-bottom: 0;
row-gap: 0;
column-gap: 3.2rem;
}
&--five {
display: flex;
justify-content: center;
}
.big-columns {
margin-right: 4.8rem;
margin-bottom: 0;
}
.small-columns {
display: grid;
grid-template-columns: auto auto;
justify-content: center;
margin-bottom: 0;
grid-gap: 3.9rem 4.9rem;
}
}
}
}
<div class="match-hub" style="background-image: url(/assets/example-content/match-hub-bg.jpg);">
<div class="match-hub__section">
<div class="match-hub__header {{#if grey-font}}grey-font{{/if}} {{#if red-highlighter}}red-highlighter{{/if}}">
<h2 class="match-hub__title">{{title}}</h2>
<a href="#" class="match-hub__link">VISIT QATAR 2022 NEWS</a>
</div>
<div class="match-hub__tiles match-hub__tiles--{{modifier}}">
{{#unless isTwoColoumn}}
<div class="big-columns">
{{render '@match-tile'}}
</div>
<div class="small-columns">
{{render '@match-tile--small'}}
{{render '@match-tile--small'}}
{{render '@match-tile--small'}}
{{render '@match-tile--small'}}
</div>
{{/unless}}
{{#if isTwoColoumn}}
{{render '@match-tile'}}
{{render '@match-tile'}}
{{/if}}
</div>
<a href="#" class="match-hub__link mobile-link">VISIT QATAR 2022 NEWS</a>
</div>
</div>