Catalog Cards

<.alert>

ConnieUI.Cards

Free trial

You have 14 days left in your free trial.

Starter plan, billed monthly.

HEEx 
<div class="w-sm">
  <ConnieUI.Cards.card>
    <ConnieUI.Cards.alert color="success" icon="icon-check-circle">
      <ConnieUI.Typography.subtitled_heading level="h3">
        Free trial
        <:subtitle>You have 14 days left in your free trial.</:subtitle>
      </ConnieUI.Typography.subtitled_heading>
    </ConnieUI.Cards.alert>
    <ConnieUI.Cards.content>
      <ConnieUI.Typography.muted>Starter plan, billed monthly.</ConnieUI.Typography.muted>
    </ConnieUI.Cards.content>
  </ConnieUI.Cards.card>
</div>

Variant matrix

Every combination of one or two attributes, side by side.

Controls

:string
:string

Docs

An alert banner to be used inside a card. ## Examples <ConnieUI.Cards.card> <ConnieUI.Cards.alert color="success" icon="icon-check-circle"> <:header>Free Trial Period</:header> <:subtitle>You have 14 days left in your free trial.</:subtitle> </ConnieUI.Cards.alert> <ConnieUI.Cards.content> ... </ConnieUI.Cards.content> </ConnieUI.Cards.card>
Attribute Type Default Description
color :string "gray"
brand | success | error | warning | gray
icon * :string
Slot Slot attributes Description
inner_block *