# 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`](/ui/card) for the surface.



## Install

```ts
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

```html
<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.