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
Edit code

Non-Interactive, Low Elevation Card

Card heading
Card content
Edit code

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 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