BlocksNewsletter Section

Newsletter Section

Collects email addresses for newsletter subscriptions and mailing list signups.

Basic Newsletter Section

Stay in the loop

Get the latest updates and news delivered to your inbox.

<div class="py-12 px-6">
<div class="max-w-md m-auto">
<h2 class="ff-s fs-xxl fw-600 tc-slate-10 mb-2">Stay in the loop</h2>
<p class="fs-sm tc-silver-10 mb-6 m-0">Get the latest updates and news delivered to your inbox.</p>
<div class="d-f g-2">
<input type="email" placeholder="you@example.com" class="f-1 b-1 bc-silver-4 tc-black px-3 py-2 rad-0 fs-md f:oc-silver-1 f:os-s f:ow-2" />
<button class="ai-c d-f jc-c px-4 py-2 rad-0 fs-sm fw-500 bg-slate-8 tc-white h:bg-slate-10 f:oc-silver-1 f:os-s f:ow-2">Subscribe</button>
</div>
</div>
</div>

Centered with Icon

Subscribe to our newsletter

Join thousands of subscribers and get weekly insights.

We respect your privacy. Unsubscribe at any time.

<div class="py-12 px-6 ta-c">
<div class="max-w-md m-auto">
<div class="d-f jc-c mb-4">
<div class="d-f ai-c jc-c d-12 rad-9 bg-slate-8 tc-white">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6"
viewBox="0 0 256 256"
>
<rect width="256" height="256" fill="none" />
<line
x1="96"
y1="112"
x2="176"
y2="112"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
<line
x1="96"
y1="144"
x2="176"
y2="144"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
<path
d="M32,200a16,16,0,0,0,16-16V64a8,8,0,0,1,8-8H216a8,8,0,0,1,8,8V184a16,16,0,0,1-16,16Z"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
<path
d="M32,200a16,16,0,0,1-16-16V88"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
</svg>
</div>
</div>
<h2 class="ff-s fs-xxl fw-600 tc-slate-10 mb-2">Subscribe to our newsletter</h2>
<p class="fs-sm tc-silver-10 mb-6 m-0">Join thousands of subscribers and get weekly insights.</p>
<div class="d-f g-2">
<input type="email" placeholder="you@example.com" class="f-1 b-1 bc-silver-4 tc-black px-3 py-2 rad-0 fs-md f:oc-silver-1 f:os-s f:ow-2" />
<button class="ai-c d-f jc-c px-4 py-2 rad-0 fs-sm fw-500 bg-slate-8 tc-white h:bg-slate-10 f:oc-silver-4 f:os-s f:ow-2">Subscribe</button>
</div>
<p class="fs-xs tc-silver-8 mt-3 m-0">We respect your privacy. Unsubscribe at any time.</p>
</div>
</div>