BlocksCTA Section

CTA Section

Encourages user action.

Basic CTA Section

Ready to get started?

<div class="py-6 px-6 d-f ai-c jc-sb fw-w g-4">
<h2 class="ff-s fs-3xl fw-600 tc-slate-10 m-0">Ready to get started?</h2>
<div class="d-f g-3">
<button class="px-4 py-2 rad-0 fs-sm fw-600 bg-slate-8 tc-white h:bg-slate-10 f:oc-silver-4 f:os-s f:ow-2">Get started</button>
<button class="px-4 py-2 rad-0 fs-sm fw-600 bg-white tc-slate-8 b-1 bc-silver-4 h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2">Learn more</button>
</div>
</div>

Colored

Start for free today!

<div class="py-6 px-6 d-f ai-c jc-sb fw-w g-4 bg-indigo-8">
<h2 class="ff-s fs-3xl fw-600 tc-white m-0">Start for free today!</h2>
<div class="d-f g-3">
<button class="px-4 py-2 rad-0 fs-sm fw-600 bg-white tc-indigo-8 h:bg-silver-2">Start free trial</button>
<button class="px-4 py-2 rad-0 fs-sm fw-600 bg-transparent tc-white b-1 bc-white/30 h:bg-white/10 f:oc-white/30 f:os-s f:ow-2">Pricings</button>
</div>
</div>

Icons

Ready to get started?

<div class="py-6 px-6 d-f ai-c jc-sb fw-w g-4">
<h2 class="ff-s fs-3xl fw-600 tc-slate-10 m-0">Ready to get started?</h2>
<div class="d-f g-3">
<button class="d-f ai-c g-2 px-4 py-2 rad-0 fs-sm fw-600 bg-slate-8 tc-white h:bg-slate-10 f:oc-silver-4 f:os-s f:ow-2">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 256 256"
aria-hidden="true"
>
<rect width="256" height="256" fill="none" />
<line
x1="40"
y1="128"
x2="216"
y2="128"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
<polyline
points="144 56 216 128 144 200"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
</svg>
<span>Get started</span>
</button>
<button class="d-f ai-c g-2 px-4 py-2 rad-0 fs-sm fw-600 bg-white tc-slate-8 b-1 bc-silver-4 h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 256 256"
aria-hidden="true"
>
<rect width="256" height="256" fill="none" />
<line
x1="128"
y1="144"
x2="128"
y2="32"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
<polyline
points="216 144 216 208 40 208 40 144"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
<polyline
points="168 104 128 144 88 104"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
</svg>
<span>Download</span>
</button>
</div>
</div>