SystemMessageCard

Source: client/lib/theme/vueda-tailwind/display/index.js

Centered card chassis with the named tone group used by crest descendants.

Vue component: SystemMessageCard

Slot	Default classes	Description
root	5 classes	Centered card chassis with the named tone group used by crest descendants.
crest	flex items-start gap-3 pb-4 border-b-hairline	Header row containing the icon tile, meta column, and optional status code, separated from the body by a bottom rule.
crestIcon	11 classes	Tone-tinted icon tile routed through the system-message group scope.
crestMeta	flex flex-col justify-center gap-0.5 min-w-0 flex-1	Meta text column inside the crest, flexing between icon and optional code.
crestEyebrow	2 classes	Uppercase eyebrow for the system-message category.
crestKind	font-mono text-[12px] font-medium leading-[1.3] text-foreground	Mono line for a machine-readable path, action kind, or route label.
crestCode	2 classes	Optional trailing status code, rendered as an oversized mono numeral.
body	flex flex-col gap-3	Body stack for explanatory copy, diagnostics, and embedded display primitives.
actions	flex items-center gap-2	Optional action row below the body content.

root

Centered card chassis with the named tone group used by crest descendants.

Default classes:

group/system-message-card
max-w-[460px] w-full
flex flex-col gap-5
rounded-vueda-card hairline hairline-border bg-card
px-8 pt-8 pb-7

Source: client/lib/theme/vueda-tailwind/display/SystemMessageCard.theme.js:16

crest

Header row containing the icon tile, meta column, and optional status code, separated from the body by a bottom rule.

Default classes:

flex items-start gap-3 pb-4 border-b-hairline

Source: client/lib/theme/vueda-tailwind/display/SystemMessageCard.theme.js:26

crestIcon

Tone-tinted icon tile routed through the system-message group scope.

Default classes:

flex items-center justify-center shrink-0
w-9 h-9 rounded-[4px]
text-[18px] leading-none
group-data-[tone=info]/system-message-card:bg-primary/[0.12]
group-data-[tone=info]/system-message-card:text-primary
group-data-[tone=loading]/system-message-card:bg-primary/[0.12]
group-data-[tone=loading]/system-message-card:text-primary
group-data-[tone=warning]/system-message-card:bg-warning/[0.14]
group-data-[tone=warning]/system-message-card:text-warning
group-data-[tone=danger]/system-message-card:bg-destructive/[0.12]
group-data-[tone=danger]/system-message-card:text-destructive

Source: client/lib/theme/vueda-tailwind/display/SystemMessageCard.theme.js:30

crestMeta

Meta text column inside the crest, flexing between icon and optional code.

Default classes:

flex flex-col justify-center gap-0.5 min-w-0 flex-1

Source: client/lib/theme/vueda-tailwind/display/SystemMessageCard.theme.js:49

crestEyebrow

Uppercase eyebrow for the system-message category.

Default classes:

text-[10px] font-semibold uppercase tracking-[0.06em]
text-muted-foreground leading-none

Source: client/lib/theme/vueda-tailwind/display/SystemMessageCard.theme.js:53

crestKind

Mono line for a machine-readable path, action kind, or route label.

Default classes:

font-mono text-[12px] font-medium leading-[1.3] text-foreground

Source: client/lib/theme/vueda-tailwind/display/SystemMessageCard.theme.js:57

crestCode

Optional trailing status code, rendered as an oversized mono numeral.

Default classes:

font-mono text-[36px] font-semibold leading-none tabular-nums
text-foreground/50 shrink-0 self-center

Source: client/lib/theme/vueda-tailwind/display/SystemMessageCard.theme.js:61

body

Body stack for explanatory copy, diagnostics, and embedded display primitives.

Default classes:

flex flex-col gap-3

Source: client/lib/theme/vueda-tailwind/display/SystemMessageCard.theme.js:68

actions

Optional action row below the body content.

Default classes:

flex items-center gap-2

Source: client/lib/theme/vueda-tailwind/display/SystemMessageCard.theme.js:72