<div class="home-cta">
<div class="home-cta__container">
<h2 class="home-cta__lead-in-text">Pursue what drives you.</h2>
<div class="home-cta__description">
<p>Don't just take courses - take the next setep towards your future in the arts.</p>
</div>
<div class="home-cta__button">
<a href="#" class="standard-button standard-button--dark
standard-button---width standard-button--secondary">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Apply Now</span><span class="standard-button__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<mask id="mask0_5509_8875" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_5509_8875)">
<path d="M16.175 13H4V11H16.175L10.575 5.4L12 4L20 12L12 20L10.575 18.6L16.175 13Z" fill="white" />
</g>
</svg></span></span></div>
</a>
</div>
</div>
</div>
<div class="home-cta">
<div class="home-cta__container">
<h2 class="home-cta__lead-in-text">{{ fields.leadInText }}</h2>
<div class="home-cta__description">
<p>{{ fields.description }}</p>
</div>
<div class="home-cta__button">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
text: fields.linkText,
type: 'secondary',
url: fields.linkUrl,
},
background: 'dark'
}%}
</div>
</div>
</div>
{
"title": "Homepage CTA section",
"fields": {
"leadInText": "Pursue what drives you.",
"description": "Don't just take courses - take the next setep towards your future in the arts.",
"linkText": "Apply Now",
"linkUrl": "#"
}
}
.home-cta
--backgroundColor linear-gradient(180deg, #002657 0%, #162F93 100%)
--textColor white
@extends $componentWithMargin
fluid(padding-left, 17px, 48px)
fluid(padding-right, 17px, 48px)
position relative
&:before
background-image repeating-linear-gradient(transparent, transparent 30px, blue500 30px, blue500 32px)
fluid(bottom, 28px, 72px)
content ""
display block
left 0
position absolute
right 0
fluid(top, 0, 42px)
&__container
background var(--backgroundColor)
border-radius 16px
fluid(padding-bottom, 48px, 80px)
fluid(padding-left, 24px, 64px)
fluid(padding-right, 24px, 64px)
fluid(padding-top, 48px, 80px)
position relative
text-align center
z-index 1
&__lead-in-text
@extends $headline2alt
color var(--textColor)
&__button
fluid(margin-top, 32px, 48px)
&__description
@extends $bodyMedium
color var(--textColor)
margin-top 24px
No notes defined.