AvenUI.Components.Card (AvenUI v1.0.0)

Card container with composable header, body, and footer slots.

Examples

<%!-- Simple card with all slots --%>
<.card>
  <:header>
    <.card_title>Server #3</.card_title>
    <.card_description>Last ping 2s ago</.card_description>
  </:header>
  <:body>
    <p>CPU: 14%</p>
  </:body>
  <:footer>
    <.button size="sm">Restart</.button>
  </:footer>
</.card>

<%!-- Flat variant (no shadow, minimal border) --%>
<.card variant="flat" class="p-6">
  Content here
</.card>

<%!-- With hover effect for clickable cards --%>
<.card variant="interactive" phx-click="select" phx-value-id={@item.id}>
  Clickable card
</.card>

Summary

Functions

card(assigns)

Renders a card container with optional header, body, and footer sections.

card_description(assigns)

Card description — muted subtitle inside :header slot.

card_title(assigns)

Card title — rendered inside :header slot.

Functions

card(assigns)

Renders a card container with optional header, body, and footer sections.

Attributes

variant (:string) - Defaults to "default". Must be one of "default", "flat", or "interactive".
padding (:string) - Defaults to "md". Must be one of "none", "sm", "md", or "lg".
class (:string) - Defaults to nil.
Global attributes are accepted. Supports all globals plus: ["phx-click", "phx-target", "id"].

Slots

header
body
footer
inner_block

card_description(assigns)

Card description — muted subtitle inside :header slot.

Attributes

class (:string) - Defaults to nil.

Slots

inner_block (required)

card_title(assigns)

Card title — rendered inside :header slot.

Attributes

class (:string) - Defaults to nil.

Slots

inner_block (required)