---
url: "https://vueda.dev/v3/reference/theming/keys/SystemMessageCard.md"
title: "SystemMessageCard"
---

# 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](/v3/reference/api/vue/SystemMessageCard.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/SystemMessageCard.md#theme-key-SystemMessageCard-root) | 5 classes | Centered card chassis with the named tone group used by crest descendants. |
| [crest](/v3/reference/theming/keys/SystemMessageCard.md#theme-key-SystemMessageCard-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](/v3/reference/theming/keys/SystemMessageCard.md#theme-key-SystemMessageCard-crestIcon) | 11 classes | Tone-tinted icon tile routed through the system-message group scope. |
| [crestMeta](/v3/reference/theming/keys/SystemMessageCard.md#theme-key-SystemMessageCard-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](/v3/reference/theming/keys/SystemMessageCard.md#theme-key-SystemMessageCard-crestEyebrow) | 2 classes | Uppercase eyebrow for the system-message category. |
| [crestKind](/v3/reference/theming/keys/SystemMessageCard.md#theme-key-SystemMessageCard-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](/v3/reference/theming/keys/SystemMessageCard.md#theme-key-SystemMessageCard-crestCode) | 2 classes | Optional trailing status code, rendered as an oversized mono numeral. |
| [body](/v3/reference/theming/keys/SystemMessageCard.md#theme-key-SystemMessageCard-body) | `flex flex-col gap-3` | Body stack for explanatory copy, diagnostics, and embedded display primitives. |
| [actions](/v3/reference/theming/keys/SystemMessageCard.md#theme-key-SystemMessageCard-actions) | `flex items-center gap-2` | Optional action row below the body content. |

<a id="theme-key-SystemMessageCard-root"></a>

## root

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

Default classes:

```text
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`

<a id="theme-key-SystemMessageCard-crest"></a>

## 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`

<a id="theme-key-SystemMessageCard-crestIcon"></a>

## crestIcon

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

Default classes:

```text
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-text
group-data-[tone=loading]/system-message-card:bg-primary/[0.12]
group-data-[tone=loading]/system-message-card:text-primary-text
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`

<a id="theme-key-SystemMessageCard-crestMeta"></a>

## 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`

<a id="theme-key-SystemMessageCard-crestEyebrow"></a>

## crestEyebrow

> Uppercase eyebrow for the system-message category.

Default classes:

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

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

<a id="theme-key-SystemMessageCard-crestKind"></a>

## 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`

<a id="theme-key-SystemMessageCard-crestCode"></a>

## crestCode

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

Default classes:

```text
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`

<a id="theme-key-SystemMessageCard-body"></a>

## 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`

<a id="theme-key-SystemMessageCard-actions"></a>

## 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`