LanternUI.Components.Card (LanternUI v0.8.2)

A bounded panel: a titled surface that groups related content on a page.

Lantern had containers for collections — data_table, resource_list, stat_grid — but nothing for the ordinary case of "a titled box with some content in it", so apps were hand-rolling a div with a border and their own heading every time. This is that box.

<.card title="Participants" description="Everyone on this settlement.">
  <:actions><.button size="sm">Invite</.button></:actions>
  …content…
  <:footer>3 of 4 have responded.</:footer>
</.card>

With no title and no :header the chrome disappears and it is simply a padded surface. Pass flush when the content draws its own edges (a table, a list) and should meet the card's border instead of sitting inside its padding.

Summary

Functions

card(assigns)

card_grid(assigns)

A responsive grid of cards. Cards flex from a common basis rather than a fixed column count, so the last row fills instead of leaving dead cells.

Functions

card(assigns)

Attributes

title (:string) - Card heading. Defaults to nil.
description (:string) - Muted line under the heading. Defaults to nil.
icon (:string) - Optional leading icon by the heading — a lantern icon name or a host hero-* name. Defaults to nil.
flush (:boolean) - Drop the body padding, for content that draws its own edges (tables, lists). Defaults to false.
class (:any) - Extra classes merged onto the root element. Defaults to nil.
Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

Slots

header - Replaces the title/description block entirely.
actions - Right-aligned controls on the header row.
inner_block (required) - Card body.
footer - Muted strip below the body, separated by a rule.

card_grid(assigns)

A responsive grid of cards. Cards flex from a common basis rather than a fixed column count, so the last row fills instead of leaving dead cells.

Attributes

min (:string) - Minimum width a card may flex down to. Defaults to "16rem".
class (:any) - Extra classes merged onto the grid. Defaults to nil.
Global attributes are accepted. Arbitrary HTML attributes passed through.

Slots

inner_block (required) - card/1 children.