← All components
CTA
freeCTA 03
Full-color mint accent CTA card with a serif headline and dual buttons on a deep forest canvas.
Preview
Copy the code
paste-ready → Designer
<!-- Paste markup into an Embed, or recreate as native elements.
Styles below map 1:1 to the class names above. -->
<section class="cta_wrap">
<div class="cta_card">
<div class="cta_glow"></div>
<div class="cta_glowb"></div>
<p class="cta_eyebrow">Rooted in Renewal</p>
<h2 class="cta_title">Grow something that lasts beyond the season.</h2>
<p class="cta_sub">Join a community restoring soil, sourcing responsibly, and building wellness rituals that give back more than they take.</p>
<div class="cta_actions">
<a class="cta_primary" href="#start">Start your plan</a>
<a class="cta_secondary" href="#impact">Explore the impact</a>
</div>
</div>
</section>
<style>
.cta_wrap {
width:100%;
background-color:#07221d;
padding:96px 24px;
display:flex;
justify-content:center;
box-sizing:border-box;
}
.cta_card {
position:relative;
width:100%;
max-width:1080px;
overflow:hidden;
border-radius:32px;
background-color:#8fe388;
padding:80px 48px;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
box-sizing:border-box;
}
.cta_glow {
pointer-events:none;
position:absolute;
right:-96px;
top:-96px;
height:320px;
width:320px;
border-radius:9999px;
background-color:#b6f2b0;
filter:blur(80px);
opacity:0.7;
}
.cta_glowb {
pointer-events:none;
position:absolute;
left:-80px;
bottom:-96px;
height:288px;
width:288px;
border-radius:9999px;
background-color:#6fd07f;
filter:blur(90px);
opacity:0.5;
}
.cta_eyebrow {
position:relative;
z-index:10;
margin:0 0 24px 0;
font-family:'Helvetica Neue',Arial,sans-serif;
font-size:13px;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.28em;
color:#0c3a2e;
}
.cta_title {
position:relative;
z-index:10;
margin:0 0 24px 0;
max-width:720px;
font-family:Georgia,'Times New Roman',serif;
font-size:56px;
font-weight:400;
line-height:1.05;
letter-spacing:-0.02em;
color:#07221d;
}
.cta_sub {
position:relative;
z-index:10;
margin:0 0 40px 0;
max-width:520px;
font-family:'Helvetica Neue',Arial,sans-serif;
font-size:17px;
line-height:1.6;
color:#134034;
}
.cta_actions {
position:relative;
z-index:10;
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:16px;
}
.cta_primary {
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:9999px;
background-color:#07221d;
padding:16px 36px;
font-family:'Helvetica Neue',Arial,sans-serif;
font-size:16px;
font-weight:600;
color:#8fe388;
text-decoration:none;
border:2px solid #07221d;
transition:transform 0.2s ease;
}
.cta_secondary {
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:9999px;
border:2px solid #0c3a2e;
background-color:transparent;
padding:16px 36px;
font-family:'Helvetica Neue',Arial,sans-serif;
font-size:16px;
font-weight:600;
color:#0c3a2e;
text-decoration:none;
transition:background-color 0.2s ease,color 0.2s ease;
}
</style>One email unlocks copying across the whole library — that's the only ask.