Card

Introduction

A card is a bounded unit of UI content with a solid background color.

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

1import React from "react";
2import { Card, Elevation, Intent } from "@commure/components-foundation";
3
4function MyCard() {
5 return (
6 <Card interactive={false} elevation={Elevation.ZERO}>
7 <h5>
8 <a href="#">Card heading</a>
9 </h5>
10 <p>Card content</p>
11 <Button intent={Intent.PRIMARY}>Submit</Button>
12 </Card>
13 );
14}
15
16export default MyCard;

API Reference

Card

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to a child element.
elevationfalseElevationControls 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.
interactivefalsebooleanWhether 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.
onClickfalse(e: MouseEvent<HTMLDivElement>) => voidCallback invoked when the card is clicked. Recommended when `interactive` is `true`.

Related Reading

Blueprint Reference