Skip to content

CTA Banner

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/theme.css";
import "elements-kit/ui/styles/scaling.css";
import "elements-kit/ui/styles/radius.css";
import "elements-kit/ui/styles/space.css";
import "elements-kit/ui/styles/typography.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/styles/shadow.css";
import "elements-kit/ui/styles/material.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