Renders a card.

Examples

<.card title="Team members" subtitle="Invite your colleagues">
  <ul>...</ul>
  <:footer>
    <.button size="sm">Invite</.button>
  </:footer>
</.card>

<.card interactive phx-click="open" phx-value-id={@id}>
  <h3>Clickable card</h3>
</.card>

Attributes

• title (:string) - Heading text. This shadows the HTML title attribute; to set a native tooltip pass rest={%{title: "..."}}.

  Defaults to nil.

• subtitle (:string) - Defaults to nil.

• padded (:boolean) - Applies default padding to the body. Defaults to true.

• interactive (:boolean) - Adds hover elevation and a pointer cursor. Pair with phx-click or wrap in a link. Defaults to false.

• class (:string) - Defaults to nil.

• header_class (:string) - Replaces the header's own classes. Defaults to nil.

• body_class (:string) - Defaults to nil.

• footer_class (:string) - Defaults to nil.

• Global attributes are accepted.

Slots

• inner_block (required)
• header - Replaces the generated title/subtitle header entirely.
• footer