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

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