CTA Banner
Bordered call-to-action panel — heading, copy, and CTA row.
A .cta-banner is a bordered call-to-action panel. Centered by default; flips to start-aligned with data-align="start". Composes with .x-card for the surface.
Install
import "elements-kit/ui/styles.css";
import "elements-kit/ui/styles/palette/gray.css";
import "elements-kit/ui/styles/neutral/gray.css";
import "elements-kit/ui/styles/palette/mint.css";
import "elements-kit/ui/styles/accent/mint.css";
import "elements-kit/ui/card/card.css";
import "elements-kit/ui/marketing/marketing.css";API
<div class="x-card cta-banner">
<h2 class="section-heading section-heading-2">Ship faster with composable primitives.</h2>
<p class="section-paragraph">
Class + data-attribute API. No runtime, no theming surprises.
</p>
<div data-cta>
<a href="/start">Get started</a>
</div>
</div>| Attribute | Values |
|---|---|
data-align | center (default), start |
Wrap CTAs in a <div data-cta> — that's the row that picks up the flex-wrap + gap.
Tips
Do
Use sparingly. One CTA banner near the bottom of the page, not every section.
Don't
Add a background image inside the primitive. Decorate from the caller — the kit handles layout only.