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

import React from "react";
import { Card, Elevation, Intent } from "@commure/components-foundation";
function MyCard() {
return (
<Card interactive={false} elevation={Elevation.ZERO}>
<h5><a href="#">Card heading</a></h5>
<p>Card content</p>
<Button intent={Intent.PRIMARY}>Submit</Button>
</Card>
);
}
export 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