A call to action is the last band of a marketing page: the one thing left to say once the claims
have been made, and the one or two places to go from there. It is the shortest of the
[marketing sections](/concepts/marketing-sections), no picture, no repeated items, no price,
because a page that has already explained itself needs a door rather than a second explanation. A
page puts it inside a [MarketingLayout](/components/layouts/marketing-layout) as the last child of
the main region.

It is not a second hero. A hero states a proposition to somebody who has just arrived and does not
yet know what the page is; a `CTA` addresses a reader who has read it. When two claims both
deserve the opening, that is a longer hero or a band of features between them, the closing band
is not where a second claim goes.

```tsx demo="marketing/cta-preview"
```

## Usage

```tsx
import { CTA } from "@asheeui/web";

<CTA
  title="Send your first campaign this week"
  primaryAction={{ label: "Create an account", href: "/signup" }}
/>
```

`title` is required and the actions are optional: one destination, a primary and a secondary, or
nothing at all. The last is rare, and usually a sign the sentence belongs in the prose above rather
than in a band, a page that ends by asking for nothing has already asked elsewhere.

## The panel

`panel` decides whether the closing call sits on a surface of its own. `bordered`, the default,
draws an edge around a theme-background panel; `muted` fills a subdued one with no edge; and
`plain` draws nothing, so the content sits straight on the band.

The surface is drawn inside the band rather than instead of it: `background` is still what the
band paints, so the two combine, a `plain` panel on a `background="muted"` band is how a closing
call gets a ground without a box. The panel is a surface and nothing else: it adds no role, no
focus stop and no dismissal.

```tsx demo="marketing/cta-panel"
```

## When the action is a form

A configured action describes a destination and takes no handler, so a band whose action submits
something renders that control in `children`, after the configured actions. The band deliberately
owns no form: an email field, a survey or a plan picker is the consumer's to write, and the band
frames whatever it is given. Nothing in the band's own options reaches into the form, so the
controls keep their own labels, messages and state.

```tsx demo="marketing/cta-form"
```

## Props

```props CTA
```

Six options are registered, `align` `center`, `spacing` `lg`, `background` `none`, `panel`
`bordered`, `containerSize` `lg` and `contained` `true`, and each resolves from the instance,
then `components.cta`, then the registration. The defaults are a closing band's own: centred,
panelised and shorter than a hero's, because the page has made its argument by the time the band
arrives. `title`, `eyebrow`, `description`, `titleAs`, the two actions and `children` are
instance-only, because they say what this page is asking for, the heading's level belongs to the
page's outline rather than to the product.

As in the hero, the band renders its own `Container` and switches the underlying `Section`'s
container off, so `contained` and `containerSize` are the two options that decide the width, and
`as` picks the element the band renders as, `section` unless stated.

## Accessibility

- The title renders as an `<h2>` by default: the section kit's `lg` step is the `heading-xl`
  typography role, and the step decides the treatment only, every size of that heading renders
  an `<h2>`. So a page that puts a hero above a `CTA` gains one `<h1>`, not two. A page whose
  closing band really is its only heading passes `titleAs="h1"`, and a band nested under an
  existing section heading passes `h3` or lower.
- The actions render through [`Button`](/components/forms/button): one with `href` or a router
  `component` is an anchor and announces as a link, one without is a `<button>`. The primary
  action is solid and the secondary bordered unless the configuration says otherwise, and the row
  stacks on a narrow window so both labels stay readable.
- The band renders a `<section>` named by its own headline, `aria-labelledby` points at the
  heading it draws, so a reader navigating by region hears the closing call's title rather than
  reaching it only through the layout's `main`. A consumer's `aria-labelledby` wins over the
  generated one, and every other attribute the band does not use is passed to the element, so
  `aria-label` also names the region.
- The panel is decoration, background, border and padding, so it introduces no role, no focus
  stop and nothing to dismiss, and a reader moves from the last action to the footer.

The three parts every band shares, and the rule about the page's single `<h1>`, are stated once in
[Marketing sections](/concepts/marketing-sections).

## Related

```related hero, marketing-layout, button
```