Card
The ECard component groups related content on a contained surface. Use it to establish visual hierarchy for summaries, entities, and focused tasks; use plain layout when content does not need a distinct boundary.
Usage
Configure the common surface props and inspect the generated markup. color resolves the background and readable contrast, while outlined, tonal, and elevation define its visual emphasis.
Workspace activity
Updated a few minutes ago
Review recent changes and continue where your team left off.
Visual variants
Choose one surface treatment that matches the card's hierarchy. Tonal cards use color as a subtle tint and remain flat even when elevation is provided; combine tonal and outlined only when the boundary needs additional definition.
Default surface
A neutral contained card for standard content.
Outlined surface
A visible boundary without added elevation.
Tonal surface
A subtle semantic tint that remains flat.
Content anatomy
Use title, subtitle, and description for predictable card regions. The default slot holds richer body content and is rendered only when content is supplied.
Quarterly summary
April to June
Revenue and engagement moved above the previous period.
The default slot supports structured content beyond the built-in text regions.
Media placement
Body media uses prepend* and append* props and can span the card content. Header media uses the corresponding *Header* props and stays aligned with the title block.
Design review
Today at 14:30
Header media stays connected to the title and subtitle.
Saved report
Analytics workspace
Body media can align across the complete content area.
Slots and actions
Place rich content in the default slot and related actions in #footer. Keep actions as real buttons or links instead of turning the entire visual surface into an implicit control.
Publish changes?
Your update will become visible to everyone in the workspace.
Composition patterns
Cards work best when each surface represents one clear subject. Keep action hierarchy restrained, allow content-driven height, and prefer a responsive row and column layout over fixed card widths or nested cards.
Morgan Lee
Product designer
Owns the component documentation and interaction guidelines.
Documentation review
3 comments remaining
Completion rate
This month
Accessibility
ECard is a visual container and renders no interactive semantics by itself. Add a meaningful region or article label when the card needs standalone structure, preserve heading order, and keep every action keyboard accessible.
Account security
Review active sessions and update your sign-in preferences.
API reference
Reference the verified public props for ECard. The component exposes default and footer slots and does not emit public events.
ECard props
| Property | Type | Default |
|---|---|---|
| color | string | undefined |
Resolves the card background and readable contrast colors from the active theme. | ||
| outlined | boolean | false |
Adds a thin border around the card surface. | ||
| tonal | boolean | false |
Uses color as a subtle surface tint and keeps the card flat. | ||
| depressed | boolean | false |
Removes visual elevation from the card. | ||
| elevation | Elevation | undefined |
Applies an elevation preset when tonal mode is not active. | ||
| height | string | undefined |
Sets an explicit card height. Numeric strings are normalized to pixels. | ||
| title | string | undefined |
Renders the primary text in the card header. | ||
| subtitle | string | undefined |
Renders supporting text in the card header. | ||
| description | string | undefined |
Renders a description between the header and default slot body. | ||
| prependIcon / appendIcon | string | IconPath | IconPath[] | undefined |
Renders an icon at the start or end of the complete card body area. | ||
| prependIconProps / appendIconProps | Partial | undefined |
Passes additional props to the corresponding body EIcon. | ||
| prependAvatar / appendAvatar | string | undefined |
Renders an avatar at the start or end of the complete card body area. | ||
| prependAvatarProps / appendAvatarProps | Partial | undefined |
Passes additional props to the corresponding body EAvatar. | ||
| prependVerticalAlign / appendVerticalAlign | 'start' | 'center' | 'end' | 'stretch' | 'center' |
Controls vertical alignment for body media. | ||
| prependHeaderIcon / appendHeaderIcon | string | IconPath | IconPath[] | undefined |
Renders an icon at the start or end of the header. | ||
| prependHeaderIconProps / appendHeaderIconProps | Partial | undefined |
Passes additional props to the corresponding header EIcon. | ||
| prependHeaderAvatar / appendHeaderAvatar | string | undefined |
Renders an avatar at the start or end of the header. | ||
| prependHeaderAvatarProps / appendHeaderAvatarProps | Partial | undefined |
Passes additional props to the corresponding header EAvatar. | ||
Slots and events
ECard exposes the default slot for body content and the footer slot for related actions or supporting content. It does not emit public events.