1.3.1 Procedures

Procedure: badge content KEY: #:variant #:size ¶

Create a small status pill or label.

The variant argument picks a semantic color treatment while staying readable in both light and dark themes: the fill is the dark end of the ramp with near-white type on the light theme, and the light end with dark type on the dark theme, so the label clears the 4.5:1 ratio of WCAG AA.

content

The label text or inline nodes.

variant

A semantic keyword: 'neutral, 'info, 'success, 'warning or 'danger.

size

A size keyword: 'sm, 'md or 'lg.

(badge "New" #:variant 'success)

Procedure: card content KEY: #:card-classes ¶

Create a surface container grouping related content.

Compose a card from card-header, card-body and card-footer fragments, or place any content inside directly.

content

The inner content or section fragments of the card.

card-classes

List of symbols representing container CSS classes.

(card (list (card-header (h3 "Title")) (card-body (p "Body"))))

Procedure: card-body content KEY: #:body-classes ¶

Create the main body section of a card.

content

The body content fragments.

body-classes

List of symbols representing body CSS classes.

(card-body (p "Everything you need to know."))

Procedure: card-description content KEY: #:classes ¶

Create muted descriptive copy inside a card.

content

The description text or inline nodes.

classes

List of symbols representing typography CSS classes.

(card-description "Updated 3 minutes ago.")

Procedure: card-footer content KEY: #:footer-classes ¶

Create the footer section of a card, typically holding actions.

content

The footer content fragments.

footer-classes

List of symbols representing footer CSS classes.

(card-footer (list (submit-button "Save")))

Procedure: card-header content KEY: #:header-classes ¶

Create the header section of a card.

content

The header content fragments.

header-classes

List of symbols representing header CSS classes.

(card-header (h3 "Recent activity"))

Procedure: card-title content KEY: #:classes ¶

Create a card heading.

content

The heading text or inline nodes.

classes

List of symbols representing typography CSS classes.

(card-title "Account summary")

Procedure: expandable-card content KEY: #:id #:title #:icon #:tag #:open #:wide? #:data #:card-classes #:summary-classes #:body-classes ¶

Create a card that opens in place, its header doubling as the disclosure control.

The card is a native <details>, so it opens and closes with no JavaScript at all, and id is placed on the <summary> rather than on the <details>: a link to that id then points *inside* the card, which is what makes a browser open it as it scrolls there, and the summary is the header a reader should land on.

content

The nodes revealed while the card is open.

id

An optional HTML identifier, placed on the summary, for a link to land on.

title

The card’s title, rendered as a real heading inside the summary.

icon

An optional Phosphor icon name shown before the title, e.g. 'cards.

tag

An optional short label shown as a badge beside the title, such as the category a card belongs to.

open

Whether the card starts open.

wide?

Whether the card spans the whole row of a grid it is placed in.

data

An association list of data-* attributes rendered on the <details>, named without the data- prefix. These are what a sort-control orders a tray of cards by, and a card carries as many as the orderings you intend to offer: '((order . "0") (title . "Cards")).

card-classes

List of additional container CSS classes.

summary-classes

List of CSS classes for the header, which is the disclosure control.

body-classes

List of CSS classes for the layer holding content.

(expandable-card (p "Cards group related content together.")
                 #:id "cards"
                 #:title "Cards"
                 #:icon 'cards
                 #:tag "Layout"
                 #:open #t
                 #:data '((order . "0") (title . "Cards")))

Procedure: stat-card KEY: #:value #:label #:trend #:trend-variant #:classes ¶

Create a compact key-figure block for dashboards and summary panels.

value

The prominent value to display, such as a number or short string.

label

A short descriptive label rendered below the value.

trend

An optional trend string, e.g. "+12%".

trend-variant

A semantic keyword controlling the trend color: 'success, 'danger or 'neutral.

classes

List of additional utility CSS classes.

(stat-card #:value "1,204" #:label "Active users" #:trend "+12%")