<article class="profile-page-no-match">
<div class="profile-page-no-match__content">
<div class="profile-page-no-match__content--title">
You haven’t attended any England MAtches
</div>
<div class="profile-page-no-match__content--subtitle">
Your match history will appear here once you’ve started attending England Men's Senior matches
</div>
<div class="profile-page-no-match__content--btn">
<a href="/" class="cta cta--efl ">
<p>Get Tickets</p>
</a>
</div>
</div>
</article>
No notes defined.
{
"title": {
"copy": "You haven’t attended any England MAtches"
},
"subtitle": {
"copy": "Your match history will appear here once you’ve started attending England Men's Senior matches"
},
"btn-1": {
"copy": "Get Tickets"
}
}
.profile-page-no-match {
background-color: #eceef3;
min-height: 190px;
padding: 24px;
border-radius: 4px;
&__content {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
&--title {
font-family: 'England FC', arial, helvetica, sans-serif;
color: #011e41;
font-size: 4rem;
font-weight: 400;
line-height: 40px;
letter-spacing: 0.02em;
}
&--subtitle {
font-family: 'Grot12 Condensed', arial, helvetica, sans-serif;
color: #011e41;
font-size: 22px;
font-weight: 400;
line-height: 41px;
letter-spacing: -0.01em;
}
&--btn {
margin-top: 16px;
width: 100%;
}
}
.cta--efl {
max-width: 100%;
}
@include sm {
&__content {
&--title {
font-size: 30px;
}
&--subtitle {
font-size: 16px;
line-height: 30px;
}
}
}
}
<article class="profile-page-no-match">
<div class="profile-page-no-match__content">
<div class="profile-page-no-match__content--title">
{{title.copy}}
</div>
<div class="profile-page-no-match__content--subtitle">
{{subtitle.copy}}
</div>
<div class="profile-page-no-match__content--btn">
{{render '@cta--efl' btn-1 merge="true"}}
</div>
</div>
</article>