Mushilu-San UI Card
A bordered surface that groups related content, optionally clickable as a whole.
Selector: mui-card
import { Card } from '@mushilu-san/ui/data-display';Loading example…
Overview
variant sets the elevation: flat, elevated or outlined.
clickable when the whole card is one action. The card then has role="button", responds to Enter and Space, and emits clicked. Put only one action in a clickable card.
When to use
A product, article or profile preview in a grid or list. A group of related fields or facts that belong together.
When not to use
A card with several links or buttons. Put them in a list, since a clickable card holds one action. Plain text with no grouping. Use a Container or Typography. Use Typography instead.
Examples
Clickable
Loading example…
Guidelines
Do
Give a clickable card a heading inside it, so its name is clear.
Don't
Do not nest a clickable card inside another button or link.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
host | — (or button when clickable) | role="button" and are focusable. |
Keyboard
| Keys | Action |
|---|---|
| TabShiftTab | |
| EnterSpace |
The accessible name of a clickable card comes from its content, so keep a heading in the card.
API
Card
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'flat' | 'elevated' | 'outlined' | 'flat' | Visual style variant. |
clickable | boolean | false | When true, the card is keyboard-activatable and emits `clicked`. Accepts attribute presence, e.g. <… clickable>. |
| Name | Type | Description |
|---|---|---|
clicked | void | Emitted when a clickable card is activated (click, Enter, Space). |
CSS parts
::part(root)
Tokens
--mui-color-surface--mui-color-border--mui-shadow-2--mui-radius-md--mui-color-focus-ring