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.

Inverse

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

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.

Card with Anchor

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

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.

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