Card
import { Card } from '@enmovil/ui-design-system';
A content container with optional header, title and body sections (Card.Header, Card.Title and Card.Body). It comes in several colour tones and a compact spacing option.
Properties
| Property | Type | Required | Default | Allowed values | Description |
|---|---|---|---|---|---|
className | string | No | — | — | Extra CSS class added to the card, after its tone and compact classes. |
compact | boolean | No | — | — | Compact spacing variant |
tone | string | No | 'white' | 'teal', 'red', 'white', 'amber', 'slate' | Tinted background |
Other attributes
Card passes 271 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.
Events
| Name | Signature | When it fires |
|---|---|---|
onClick | MouseEventHandler<HTMLDivElement> | Fires when the card is clicked. Card.Header, Card.Body and Card.Title accept the same handlers. |
onMouseEnter | MouseEventHandler<HTMLDivElement> | Fires when the pointer enters the card. |
onMouseLeave | MouseEventHandler<HTMLDivElement> | Fires when the pointer leaves the card. |
Children
Card does not accept children.
Variants
Loading examples…
Playground
Change the controls to see how the properties affect the component. Values the controls don't cover come from the Default example.
Loading playground…
Storybook
Open Card in Storybook to try every story with the full set of controls.