<div class="get-started-index-card-text">
<div class="get-started-index-card-text__wrapper ">
<div class="category">get started</div>
<h2>Why become a coach</h2>
<p>Get started with England Football Learning and join millions in growing the grassroots game. We offer support, guidance, and advice to help you learn and find your role.</p>
</div>
</div>
No notes defined.
{
"category": "get started",
"title": "Why become a coach",
"copy": "Get started with England Football Learning and join millions in growing the grassroots game. We offer support, guidance, and advice to help you learn and find your role.",
"modifier": ""
}
.get-started-index-card-text {
align-items: center;
&__wrapper {
max-width: 27.9rem;
text-align: center;
display: initial;
min-height: initial;
.category {
@extend .efl-category-title;
color: $red;
letter-spacing: 0.08em;
margin-bottom: 0.8rem;
}
h2 {
@extend .efl-heading-1;
letter-spacing: -0.01em;
color: $blue;
margin-bottom: 1.6rem;
}
p {
@extend .efl-p-medium;
color: $color-interface-light;
}
&.white {
.category {
color: $light-blue;
}
h2 {
@extend .efl-heading-1;
color: $white;
}
p {
@extend .efl-p-large;
color: $white;
}
}
}
@media screen and (min-width: $mq-medium) {
&__wrapper {
max-width: 79.8rem;
h2 {
font-size: 5.2rem;
line-height: 5.8rem;
}
&.white {
h2 {
font-size: 5.2rem;
line-height: 5.8rem;
}
}
}
}
@media screen and (max-width: 768px) {
&__wrapper {
&.white {
.category {
font-size: 1.6rem;
}
}
}
}
}
<div class="get-started-index-card-text">
<div class="get-started-index-card-text__wrapper {{modifier}}">
<div class="category">{{category}}</div>
<h2>{{title}}</h2>
<p>{{copy}}</p>
</div>
</div>