Card

Cards are styled containers that group similar concepts and actions together.

Code

Usage

import { Card } from "@twilio-labs/match/components";
const Component = () => <Card>Ahoy</Card>;

Props

PropTypeDefaultDescription
variant?CardVariant'primary''primary', 'inverse', 'border'

Also supports padding and margin props.


Guidelines

About Cards

The card component is a stylized container with padding and margin options. It is a flexible component that can be customized to fit a variety of use cases. Cards do not handle interactive events but can have children with event handlers, such as a button or an anchor.

Note: the order of the padding and margin props affects the generated CSS, learn more in the padding and margin example below.

Accessibility

Here are some quick accessibility tips to ensure a positive user experience for all users:

  • Add links or buttons in the card instead of making the whole card clickable
  • Use the visually hidden component to describe the purpose of the card when the purpose is not evident from the content on the card

Composition

Use the card component to group similar information. Keep the card simple so that users can focus on the content and the desired action. Cards can grab a users attention so make sure that the information on the card can be read and understood independently.


Examples

Primary

The primary card is the most common variation and can be used on any light background.

Wombats have backwards-facing pouches

Inverse

The inverse card uses the inverse shadow and is designed to be used on dark backgrounds.

A group of wombats is known as a wisdom

Border

The border variation does not have a shadow but has a border. While it exists for all themes it is intended for use on the Ahoy theme.

A wombat's main line of defense is their toughened posterior

Card with Anchor

Any components can be used as children for the card component.

Wombats need your help!

The Northern Hairy-nosed Wombat is endangered. There are only 250 Northern Hairy-nosed Wombats left. Luckily the Wombat Foundation is working hard to save the wombats and you can help!

Help the Northern Hairy-nosed Wombats

Padding and Margins

The order of the padding and margin props will affect the padding and margins for the card!

The order of the props in the component corresponds to the order the CSS properties are added. For instance, having paddingLeft after padding ensures that the left padding comes from the paddingLeft property.

There are three subspecies of wombats

  • Bare-Nosed Wombat
  • Southern Hairy-nosed
  • Northern Hairy Nosed

However, if paddingLeft is first the left padding will come from the padding property.

There are three subspecies of wombats

  • Bare-Nosed Wombat
  • Southern Hairy-nosed
  • Northern Hairy Nosed