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.