Card

A surface for grouping related content with optional header and footer actions. Toggle Vue / CSS to switch the live demo and source together.

Basic

Simple card with optional title and subtitle.

Vue SFC

Nested

Cards stack freely inside other cards — including behind v-if / v-for and while dynamic content mounts.

Vue SFC

Variants

Elevated, outlined, flat and tonal looks.

Vue SFC

Colors

Primary, success, danger, warning, info accents.

Vue SFC

States

Bordered, hoverable, clickable and disabled.

Vue SFC

Actions

Footer actions slot with multiple buttons.

Vue SFC

Event: click

Listen for mno-click on a clickable card.

Vue SFC

Event: toggle

Use the click event to switch the card variant.

Vue SFC

Event log

Live log of mno-click events, distinguishing mouse vs keyboard.

Vue SFC

Dynamic content

v-if, v-else-if, v-for, <template> blocks and <Teleport> work normally inside a card (including the "empty card that fills once a query resolves" shape). Wrap a bare v-if child in a <template> or a stable element, or use mono-helper/ui/shadow/card for no constraints.

Customized

Override per-element styling with the cssClass prop (Vue) or extra utility classes (CSS).

Vue SFC

Sizes

size sets the content scale — padding, title and subtitle type, the header / actions / subtitle gaps and the header icon box — across xs, sm, md (default), lg, xl and xxl. It does not change the card's width — every card in the demo below is the same width, only the density inside differs. Use width when you want a different measure, so a compact xs card can still be wide. Corner radius stays with shape.

Changed

size used to be a 3-step density scale (compact / md / comfortable) that only changed the padding. compact is roughly sm and comfortable roughly lg; md is unchanged, so cards that never set size look exactly the same.

Vue SFC

Width & height

Set width, height, min-width, max-width, min-height or max-height — each takes a CSS string ("320px", "80%") or a number (px). Use width="100%" for a full-width card (replaces the old fullWidth).

Vue SFC

CSS Variables

Vue SFC

Themed through --mono-card-* custom properties (they inherit and pierce the shadow boundary); an explicit --mono-card-* override wins over the size/shape/color props. Re-skin globally via the --theme-* tokens.

Variable	Default	Controls
--mono-card-radius	--theme-radius-xl	Corner radius (set by shape, not size)
--mono-card-padding	1rem	Section padding (header/body/actions/footer) (set by size)
--mono-card-title-font	--theme-title-font-lg	Title font size (set by size)
--mono-card-subtitle-font	--theme-subtitle-font-lg	Subtitle font size (set by size)
--mono-card-border-width	1px	Border width (bordered → 2px)
--mono-card-border-color	theme border mix	Outer border color
--mono-card-bg	--theme-surface	Card background
--mono-card-bg-soft	theme background mix	Media-section background
--mono-card-text	--theme-text	Body text color
--mono-card-subtext	text mixed 58%	Subtitle color
--mono-card-border-soft	theme border mix	Header/footer divider color
--mono-card-accent	--mono-card-neutral	Accent (title, icon, focus ring); set by color
--mono-card-accent-rgb	--mono-card-neutral-rgb	Accent as r, g, b (for alpha mixes)
--mono-card-shadow	--theme-elev-1	Base shadow
--mono-card-shadow-elevated	elevation preset	elevated / selected shadow
--mono-card-shadow-hover	elevation preset	Hover shadow
--mono-card-header-gap	0.75rem	Gap between icon and header text (set by size)
--mono-card-actions-gap	0.5rem	Gap between action items (set by size)
--mono-card-subtitle-gap	0.25rem	Space above the subtitle (set by size)
--mono-card-icon-size	2.25rem	Header icon box size (set by size)
--mono-card-icon-inner-size	1.25rem	Glyph size inside the icon box (set by size)
--mono-card-hover-lift	-3px	translateY on hover
--mono-card-focus-ring-width	4px	Focus-visible ring width
--mono-card-focus-ring-offset	3px	Focus-visible outline offset
--mono-card-loading-bg	rgba(255,255,255,.58)	Loading overlay background
--mono-card-loading-blur	2px	Loading overlay backdrop blur
--mono-card-spinner-size	1.35rem	Loading spinner size
--mono-card-spinner-width	2px	Loading spinner stroke width
--mono-card-spinner-speed	0.65s	Loading spinner rotation duration
--mono-card-glass-bg	rgba(255,255,255,.18)	glass variant background
--mono-card-glass-border	rgba(255,255,255,.28)	glass variant border
--mono-card-glass-blur	12px	glass variant backdrop blur

The color palette is also exposed as --mono-card-{primary,secondary,success,danger,warning,info,teal,purple,dark,neutral} (each with an -rgb companion), so you can re-map a single accent color without touching the theme.

Types

Importimport { CardProps } from 'mono-helper'

Prop	Value	Default	Description
size	'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'	—	Content scale — padding, type, gaps and the header icon. Not a dimension: use `width` / `height` for that. See {@link CardSize}.
variant	'tonal' | 'gradient' | 'elevated' | 'outlined' | 'flat' | 'glass'	—	Visual style variant of the card.
color	'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'teal' | 'purple' | 'dark' | 'light' | 'neutral'	—	Color theme of the card.
shape	'square' | 'soft' | 'round'	—	Corner shape of the card.
mediaPosition	'top' | 'bottom'	—	Position of the media slot (top or bottom).
heading	string	—	Title text shown in the card header.
subheading	string	—	Subtitle text shown under the heading.
bordered	boolean	—	Adds a border around the card.
hoverable	boolean	—	Adds a hover elevation effect.
clickable	boolean	—	Makes the card interactive and clickable.
selected	boolean	—	Applies the selected highlight state.
disabled	boolean	—	Disables interaction and dims the card.
loading	boolean	—	Shows a loading overlay on the card.
width	string | number	—	Explicit sizing. Each accepts a CSS length string (`"320px"`, `"80%"`) or a number (interpreted as px). Use `width="100%"` for a full-width card.
height	string | number	—	—
minWidth	string | number	—	—
maxWidth	string | number	—	—
minHeight	string | number	—	—
maxHeight	string | number	—	—
headerDivider	boolean	—	Shows a divider below the header.
footerDivider	boolean	—	Shows a divider above the footer.
href	string	—	Renders the card as an anchor with this URL.
target	string	—	Anchor target window when href is set.
ariaLabelText	string	—	Accessible label text for screen readers.
ariaLabel	string	—	—
cssClass	CardCssClass	—	Per-element class overrides.