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
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
Customized
Override per-element styling with the cssClass prop (Vue) or extra utility classes (CSS).
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
Types
Import
import { CardProps } from 'mono-helper'| Prop | Value | Default | Description |
|---|---|---|---|
size | 'md' | 'compact' | 'comfortable' | 'md' | Visual size of the card. |
variant | 'tonal' | 'gradient' | 'elevated' | 'outlined' | 'flat' | 'glass' | 'elevated' | Visual style variant of the card. |
color | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'teal' | 'purple' | 'dark' | 'light' | 'neutral' | 'neutral' | Color theme of the card. |
shape | 'square' | 'soft' | 'round' | 'soft' | Corner shape of the card. |
mediaPosition | 'top' | 'bottom' | 'top' | 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 | false | Adds a border around the card. |
hoverable | boolean | false | Adds a hover elevation effect. |
clickable | boolean | false | Makes the card interactive and clickable. |
selected | boolean | false | Applies the selected highlight state. |
disabled | boolean | false | Disables interaction and dims the card. |
loading | boolean | false | 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 | true | Shows a divider below the header. |
footerDivider | boolean | true | 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. |