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