Koala logo Design
Koala logo Design
No matches for “”
↑↓ navigate ↵ open Esc close
PrimitivesContain & overlayReview card header

Review card header

The collapsed row for one card in a review/confirm list, paired with .

<koala-review-card-header>

Review card

shape=Rounded: documents and enquiries

The edit fields for this row: category, summary, visibility.

The name, address and contact tabs for this person.

Outstanding, where a badge has nowhere to go

avatar-flag-expression

The badge is the wider screen's answer and wraps below the title when it runs out of room, costing the row a second line; the dot rides the avatar, so it costs neither width nor height. Pair them — the badge from sm up, the dot always — and keep the badge in the accessibility tree (max-sm:sr-only) so the state is still spoken where only the dot is drawn.

API

koala-review-card the surface: shape=PillRounded; a pill settles to a panel while it has is-open
shape PillRounded
icon IconName
avatar-text string
avatar-text-expression Alpine expression
avatar-tone PrimaryNeutralDangerSuccessWarningInfo
avatar-flag-expression Alpine expression — while true, a warning dot sits on the avatar's corner
expanded bool — Static expanded state.
expanded-expression Alpine expression — caller-owned expanded state.
koala-review-card-toggle event; caller owns state changes.
disabled bool
enabled-when Alpine expression (openable only while true)