# Call to Action

> Close a page with one goal, supporting copy, and reassurance.

- Category: Marketing
- Kind: block
- Page: https://uaiblocks.dev/components/call-to-action
- Registry item: https://uaiblocks.dev/r/call-to-action.json
- Source: https://github.com/victor-teles/uai/blob/main/src/registry/uai/blocks/call-to-action.tsx

## Install

```bash
bunx shadcn@latest add https://uaiblocks.dev/r/call-to-action.json
```

## Usage

```tsx
import {
  CallToAction,
  CallToActionAction,
  CallToActionActions,
  CallToActionContent,
  CallToActionDescription,
  CallToActionReassurance,
  CallToActionReassuranceItem,
  CallToActionTitle,
  type CallToActionVariant,
} from "@/components/uai/call-to-action";

export function CallToActionPreview({ variant = "banner" }: { variant?: CallToActionVariant }) {
  return (
    <CallToAction variant={variant}>
      <CallToActionContent>
        <CallToActionTitle>Route tomorrow’s requests with Ferrow</CallToActionTitle>
        <CallToActionDescription>
          Connect your inbox in ten minutes. Your first week of jobs imports automatically.
        </CallToActionDescription>
      </CallToActionContent>
      <CallToActionActions>
        <CallToActionAction href="#start-trial">Start a 14-day trial</CallToActionAction>
        <CallToActionAction href="#demo" priority="secondary">
          Book a 20-minute demo
        </CallToActionAction>
      </CallToActionActions>
      <CallToActionReassurance aria-label="Trial terms">
        <CallToActionReassuranceItem>No card required</CallToActionReassuranceItem>
        <CallToActionReassuranceItem>Cancel from settings</CallToActionReassuranceItem>
        <CallToActionReassuranceItem>Keep your data if you leave</CallToActionReassuranceItem>
      </CallToActionReassurance>
    </CallToAction>
  );
}
```

## Anatomy

- `CallToAction`
  - `CallToActionContent`
    - `CallToActionTitle`
    - `CallToActionDescription`
  - `CallToActionActions`
    - `CallToActionAction`
  - `CallToActionReassurance`
    - `CallToActionReassuranceItem`

## Accessibility

- The section is labelled by its heading, and actions are links with descriptive text.
- The secondary action is underlined text, so the two priorities differ without relying on color.
- Reassurance is a list of Trust Panel badges; name it with aria-label.