# `PhiaUi.Components.CtaCard`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/cards/cta_card.ex#L1)

Call-to-action card: illustration/icon + headline + description + CTA buttons.

# `cta_card`

Renders a call-to-action card with illustration, headline, description, and action buttons.

## Variants

- `:default` — card with border and shadow
- `:bordered` — border-2, no shadow
- `:filled` — `bg-muted` background
- `:minimal` — plain div wrapper, no card chrome

## Alignment

- `:center` — text-center, items-center
- `:start` — text-start, items-start

## Examples

    <.cta_card title="Get Started" description="Sign up for free today.">
      <:actions>
        <.button>Sign Up</.button>
      </:actions>
    </.cta_card>

    <.cta_card title="Upgrade" variant={:filled} align={:start}>
      <:illustration><.icon name="star" /></:illustration>
      <:actions>
        <.button>Upgrade Now</.button>
        <.button variant={:outline}>Learn More</.button>
      </:actions>
      <:footer><span class="text-xs text-muted-foreground">No credit card required</span></:footer>
    </.cta_card>

## Attributes

* `title` (`:string`) (required) - CTA headline.
* `description` (`:string`) - Optional supporting description. Defaults to `nil`.
* `variant` (`:atom`) - Visual style variant. Defaults to `:default`. Must be one of `:default`, `:bordered`, `:filled`, or `:minimal`.
* `align` (`:atom`) - Content alignment. Defaults to `:center`. Must be one of `:center`, or `:start`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the wrapper element.
## Slots

* `illustration` - Optional illustration or icon above the title.
* `actions` - CTA buttons or links.
* `footer` - Optional footer content below the actions.

---

*Consult [api-reference.md](api-reference.md) for complete listing*