Card
Introduction
A card is a bounded unit of UI content with a solid background color.
The below information is a snippet from the
related section in the Blueprint reference documentation.
Elevation
Apply an elevation
value to a card to apply a drop shadow that simulates
height in the UI. Five elevations are supported, from 0 to 4.
The Classes.ELEVATION_*
constants can be used on any element (not just a
Card
) to apply the drop shadow.
Examples
This component is a simple stateless container for its children.
Interactive Card
Card heading
Card content
Non-Interactive, Low Elevation Card
Card heading
Card content
Usage
API Reference
Card
Prop Name | Required? | Type | Description |
---|---|---|---|
className | false | string | A space-delimited list of class names to pass along to a child element. |
elevation | false | Elevation | Controls the intensity of the drop shadow beneath the card: the higher the elevation, the higher the drop shadow. At elevation `0`, no drop shadow is applied. |
interactive | false | boolean | Whether the card should respond to user interactions. If set to `true`, hovering over the card will increase the card's elevation and change the mouse cursor to a pointer. Recommended when `onClick` is also defined. |
onClick | false | (e: MouseEvent<HTMLDivElement>) => void | Callback invoked when the card is clicked. Recommended when `interactive` is `true`. |
Related Reading
Blueprint Reference