PhiaUi.Components.ProgressCard (phia_ui v0.1.17)

Card component that displays a titled progress bar with optional description, value label, variant coloring, size, icon slot, and footer slot.

Variant × size color matrix

The variant controls the progress bar fill and the size controls height:

`:variant`	Bar color
`:default`	`bg-primary` (theme color)
`:success`	`bg-emerald-500`
`:warning`	`bg-amber-500`
`:destructive`	`bg-destructive`

`:size`	Bar height
`:sm`	`h-1`
`:md`	`h-2`
`:lg`	`h-3`

Examples

<%!-- Default progress for an upload --%>
<.progress_card title="Upload Progress" value={72} />

<%!-- Disk usage warning with footer --%>
<.progress_card
  title="Disk Usage"
  value={90}
  variant={:destructive}
  size={:lg}
  description="Storage is almost full"
>
  <:footer>10 GB of 12 GB used</:footer>
</.progress_card>

<%!-- Goal completion with custom label --%>
<.progress_card
  title="Annual Goal"
  value={65}
  variant={:success}
  label="$65,000 / $100,000"
>
  <:icon><.icon name="target" class="text-emerald-500" /></:icon>
</.progress_card>

Summary

Functions

progress_card(assigns)

Renders a titled progress card.

Functions

progress_card(assigns)

Renders a titled progress card.

Card regions (top to bottom):

Header — optional :icon slot (left) + title text
Content — optional description, optional value label, progress bar
Footer — optional :footer slot (timestamps, legends, etc.)

The label attribute overrides the default percentage display ("#{value}%"). Set show_value={false} to hide the label entirely.

Examples

<%!-- Upload progress --%>
<.progress_card title="Upload Progress" value={72} />

<%!-- Disk usage with destructive WARNING and footer --%>
<.progress_card
  title="Disk Usage"
  value={90}
  variant={:destructive}
  size={:lg}
  description="Storage is almost full"
>
  <:footer>10 GB of 12 GB used</:footer>
</.progress_card>

<%!-- Revenue goal with custom label and icon --%>
<.progress_card
  title="Annual Sales Goal"
  value={65}
  variant={:success}
  label="$65,000 of $100,000"
>
  <:icon><.icon name="trending-up" class="text-emerald-500" /></:icon>
</.progress_card>

Attributes

title (:string) (required) - Card title text.
value (:integer) (required) - Progress value from 0 to 100.
description (:string) - Optional description text below the title. Defaults to nil.
label (:string) - Override label for the progress value. Defaults to "N%". Defaults to nil.
variant (:atom) - Progress bar color variant. Defaults to :default. Must be one of :default, :success, :warning, or :destructive.
size (:atom) - Progress bar height size. Defaults to :md. Must be one of :sm, :md, or :lg.
show_value (:boolean) - Whether to show the value label. Defaults to true.
class (:string) - Additional CSS classes for the outer card. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the outer card element.

Slots

icon - Optional icon displayed in the card header beside the title.
footer - Optional footer content rendered at the bottom of the card.