BumblebeeBumblebee

Card

Contents

Live demoDesignCode

Live demo

Primary

This is an example of a primary card

Light-shadow

This is an example of a

Light-shadow card

More info

Dark-shadow

This is an example of a Dark-shadow card
with custom padding and background

Design

Usage

The card component is what gets used behind the content of any self-contained components. These would be components that have a background or frame such as a popover or dialog box.

Due to the way that components are built in Figma, we will not be adding this to the library. Components that have a card will be designed within the frame of the component itself.

Specs

The card component consists of the blank rectangle with a 4px radius on all corners. The colour and styles of the card vary depending on the context of its usage and how elevated it is.

The contents within the card component should adhere to the spacing guidelines in the specs. However these may differ between components.

There are three types of card components:

Primary

This is the main card behind UI on the ground level.
Example: Balance card

Style:
White with a 1px
Primary-lighten-30 stroke. No drop shadow.

Light-shadow

This is the card used for any components that are elevated on mezzanine or higher.
Example: User menu (top bar).

Style:
White with a 1px Primary-lighten-30 stroke.

Drop shadow:
X:0px / Y:2px / Blur: 8px / Spread: 0px
Primary-base at 50% opacity

Dark-shadow

This is the card used for any components that are elevated on mezzanine or higher.
Example: Toast notification

Style:
Can be multiple colours but no stroke

Drop shadow:
X:0px / Y:2px / Blur: 8px / Spread: 0px
Primary-base at 50% opacity

Please refer to Specs for examples

Placement

The card component will have various placements. These will be defined in the component documentation.

Accessibility

Use the appropriate ARIA attributes for screen readers where applicable.

Code

import { Card } from '@shieldpay/bumblebee/card';

<Card variant="lightShadow" spacing="basePos5" alignContent={{ x: 'left' }}>
  {children}
</Card>;