PhoenixDuskmoon.Component.DataDisplay.Card (PhoenixDuskmoon v9.0.1)

View Source

Card component using el-dm-card custom element.

Provides card containers with optional header, content, and footer sections.

Examples

<.dm_card>
  <:title>Star Wars</:title>
  Star Wars is an American epic space opera...
</.dm_card>

<.dm_card image="/poster.jpg">
  <:title>Movie Title</:title>
  <:action><.dm_btn>Watch</.dm_btn></:action>
</.dm_card>

Summary

Functions

dm_async_card(assigns)

Renders a card with async value support.

dm_card(assigns)

Generates a card container.

Functions

dm_async_card(assigns)

Renders a card with async value support.

Shows loading skeleton while data is being fetched, error state on failure, and renders content when data is available.

Examples

<.dm_async_card :let={data} assign={@data}>
  <:title>User Profile</:title>
  {data.name}
</.dm_async_card>

Attributes

  • id (:any) - HTML id attribute. Defaults to nil.
  • class (:any) - additional CSS classes for the card. Defaults to nil.
  • body_class (:any) - additional CSS classes for the card body. Defaults to nil.
  • skeleton_class (:any) - CSS classes for skeleton loader. Defaults to nil.
  • assign (:any) - Phoenix.LiveView.AsyncResult assign. Defaults to nil.
  • variant (:string) - card style variant. Defaults to nil.
  • shadow (:string) - card shadow depth. Defaults to nil.
  • interactive (:boolean) - make card clickable/hoverable. Defaults to false.
  • padding (:string) - card padding size. Defaults to nil.
  • image (:string) - card image URL. Defaults to nil.
  • image_alt (:string) - alt text for the card image. Defaults to "".
  • Global attributes are accepted.

Slots

  • inner_block (required) - card body content.
  • title - card title content. Accepts attributes:
    • id (:any) - title element id.
    • class (:any) - title CSS classes.
  • action - card action buttons. Accepts attributes:
    • id (:any) - action container id.
    • class (:any) - action container CSS classes.

dm_card(assigns)

Generates a card container.

Examples

<.dm_card>
  <:title>Card Title</:title>
  Card content here.
  <:action><.dm_btn>Action</.dm_btn></:action>
</.dm_card>

Attributes

  • id (:any) - HTML id attribute. Defaults to nil.
  • class (:any) - Additional CSS classes. Defaults to nil.
  • body_class (:any) - CSS classes for card body. Defaults to nil.
  • variant (:string) - Card layout variant. Defaults to nil. Must be one of nil, "compact", "side", "bordered", or "glass".
  • shadow (:string) - Card shadow size. Defaults to nil. Must be one of nil, "none", "sm", "md", "lg", "xl", or "2xl".
  • interactive (:boolean) - Make card clickable/hoverable. Defaults to false.
  • padding (:string) - Card padding size. Defaults to nil. Must be one of nil, "none", "sm", "md", or "lg".
  • image (:string) - Card image URL. Defaults to nil.
  • image_alt (:string) - Card image alt text. Defaults to "".
  • Global attributes are accepted.

Slots

  • title - Card title content. Accepts attributes:
    • id (:any) - Title element id.
    • class (:any) - Title CSS classes.
  • action - Card action buttons. Accepts attributes:
    • id (:any) - Action container id.
    • class (:any) - Action container CSS classes.
  • inner_block - Card body content.