# Call to Action Band

> The closing band of a marketing page, above the footer: a big two-tone headline, one short line, and a main action with an optional second one.

- Name: `call-to-action-band`
- Status: beta
- Categories: cta, section, marketing
- Files: the install writes `call-to-action-band.tsx`, and any part files named `call-to-action-band-*.tsx`, to your `components` alias, `@/components` by default. Edit them freely. They are yours.
- Other registry items: `@arbokui/button`, `@arbokui/button-variants`. The install adds them.
- Gallery: https://arbokui.com/website/call-to-action-band
- Registry item: https://arbokui.com/r/call-to-action-band.json

## Install

1. Add the registry to `components.json`. Do this first, once:

   ```bash
   npx shadcn@latest registry add "@arbokui=https://arbokui.com/r/{name}.json"
   ```

   The command writes this entry. You can also add it by hand:

   ```json
   {
     "registries": {
       "@arbokui": "https://arbokui.com/r/{name}.json"
     }
   }
   ```

   Without this step, the shadcn CLI looks up `@arbokui` in a public list that Arbokui does not control.

2. Add the theme once per app. It replaces your color tokens with ones checked for contrast:

   ```bash
   npx shadcn@latest add @arbokui/theme
   ```

3. Add the website component. It also adds every component it uses:

   ```bash
   npx shadcn@latest add @arbokui/call-to-action-band
   ```

## Use it for

- The last section of a landing page or a page of a site, right above the Footer.
- Put the claim in \`title\` and the rest in \`muted\`, so the eye reads the claim first.
- Give one main \`action\`, like Create a workspace, and at most one quieter \`secondaryAction\`, like See pricing.
- An action with \`href\` is a link. Pass your router's link through \`renderLink\`, like next/link, so it stays client-side. An action with \`onClick\` is a button.
- Use \`layout="split"\` for a band with the words on the start side and the actions on the end side, and the default center for a band down the middle.
- Pass a Dot Field as \`art\` for a louder band. The band fades it out behind the words.
- The headline is set in the theme's \`font-headline\`. Load Geist Serif as \`--font-geist-serif\`, like \`geist/font/serif/variable\` in Next.js, or it falls back to the system serif.

## Avoid it for

- The top of a page. Use Hero, which holds the page's h1.
- A section headline with no actions. Use Headline.
- A next step inside an app's own screen, like inviting a team. Use Call To Action, the card.
- Three or more actions. Keep one main action and one quieter one at most.
- A long description. Keep it to one line, and put the rest in the page above.

## Props

- `title`: `ReactNode`. The words that land first, in full ink. It is an h2.
- `muted`: `ReactNode`. The words that follow in gray, on the same line.
- `description`: `ReactNode`. One short line under the headline.
- `action`: `{ label: string; href?: string; onClick?: () => void }`. The main action, a large brand button. With \`href\` it is a link drawn by \`renderLink\`. It comes last in the row.
- `secondaryAction`: `{ label: string; href?: string; onClick?: () => void }`. A quieter second action, a large ghost button just before the main one.
- `layout`: `"center" | "split"`. Default `"center"`. "center" stacks everything down the middle. "split" puts the words on the start side and the actions on the end side once the band is wide, and stacks them when it is narrow.
- `art`: `ReactNode`. Your art behind the band, like a Dot Field. The band adds room around the words and fades the art out behind them. It comes up to full strength on hover.
- `renderLink`: `(props: CallToActionBandLinkProps) => ReactNode`. Default `a plain <a>`. Draws each action that has an \`href\`. It gets href, className, children, and data-slot. Spread them onto your router's link.
- `className`: `string`. Extra classes on the section, which holds the container query.

## Accessibility

- The headline is an h2, and the gray part is inside it, so screen readers hear one sentence.
- The gray is muted-foreground, which the theme checks at 4.5:1 on the page.
- An action with \`href\` is a real link, styled as a button. One with \`onClick\` is a real button.
- The main action comes last, so Tab reaches the quieter one first and the main one at the end of the band.
- The art is aria-hidden, since it is decoration, and it never takes a press.
- Both buttons are 44px tall at the default density, so they fit a thumb.

## Examples

### Two links at the end of a page

```tsx
<CallToActionBand
  title="Plan the week with your team,"
  muted="all in one place."
  description="Invite people, share the calendar, and see who is coming."
  action={{ label: "Create a workspace", href: "/signup" }}
  secondaryAction={{ label: "See pricing", href: "/pricing" }}
  renderLink={(props) => <Link {...props} />}
/>
```

### Split, with a button that opens a form

```tsx
<CallToActionBand
  layout="split"
  title="Questions about a plan?"
  muted="Send us a message."
  action={{ label: "Write to us", onClick: () => setOpen(true) }}
/>
```

### Over a Dot Field

```tsx
<CallToActionBand
  title="Plan the week with your team,"
  muted="all in one place."
  action={{ label: "Create a workspace", href: "/signup" }}
  art={<DotField bands={["var(--chart-1)", "var(--chart-2)"]} />}
/>
```