PureAdmin.Components.Card (PureAdmin v1.1.0)

Copy Markdown View Source

Card components for Pure Admin.

Provides card/1 with named slots for header, body, footer, tabs, and tools. Supports ghost mode, header underlines, live state indicators, and theme colors.

Summary

Functions

card(assigns)

Renders a card with Pure Admin BEM classes.

card_tab(assigns)

Renders a card tab button.

Functions

card(assigns)

Renders a card with Pure Admin BEM classes.

Examples

<.card>
  <p>Simple card content.</p>
</.card>

<.card title_text="Analytics Dashboard" description_text="Last 30 days">
  Dashboard content.
</.card>

<.card variant="primary" is_header_underlined>
  <:title text="Analytics Dashboard" icon="📊" />
  <:tools>
    <.button variant="secondary" size="sm">Refresh</.button>
  </:tools>
  Dashboard content.
</.card>

<.card is_ghost>
  <p>Ghost card with no background, border, or shadow.</p>
</.card>

Attributes

  • variant (:string) - Defaults to nil.Must be one of nil, "primary", "success", "warning", "danger", "info", "stat", "color-1", "color-2", "color-3", "color-4", "color-5", "color-6", "color-7", "color-8", or "color-9".
  • live_state (:string) - Persistent tinted background reflecting latest change. Defaults to nil. Must be one of nil, "up", "down", or "neutral".
  • is_ghost (:boolean) - Ghost mode with no bg, border, shadow. Defaults to false.
  • is_bordered (:boolean) - Bordered card with colored left border. Defaults to false.
  • has_padding (:boolean) - Body padding toggle. Defaults to true.
  • title_text (:string) - Simple title text (shorthand for :title slot). Defaults to nil.
  • description_text (:string) - Inline description text, truncates with ellipsis. Defaults to nil.
  • subtitle_text (:string) - Secondary/subtitle text. Defaults to nil.
  • is_header_underlined (:boolean) - Accent border under heading. Defaults to false.
  • header_underline_color (:string) - Underline color variant. Defaults to nil. Must be one of nil, "success", "warning", "danger", or "info".
  • has_inline_tabs (:boolean) - Pill-style buttons in header. Defaults to false.
  • header_wrap (:boolean) - Allow header description to wrap. Defaults to false.
  • header_class (:string) - Additional CSS classes for header element. Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • header - Full custom header content (overrides title_text/description_text).
  • title - Structured title with icon. Accepts attributes:
    • icon (:string)
    • text (:string) (required)
  • title_icon - Icon rendering before title.
  • subtitle - Rich subtitle content (alternative to subtitle_text).
  • description - Rich description content (alternative to description_text).
  • tools - Header tools/actions.
  • meta - Metadata text in header.
  • tabs - Card tabs in header.
  • footer - Card footer content.
  • actions - Footer actions (right-aligned).
  • inner_block (required)

card_tab(assigns)

Renders a card tab button.

Examples

<.card_tab is_active phx-click="switch-tab" phx-value-tab="overview">Overview</.card_tab>

Attributes

  • is_active (:boolean) - Defaults to false.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["phx-click", "phx-value-tab"].

Slots

  • inner_block (required)