BumblebeeBumblebee

Card controls

Contents

Live demoDesignCode

Live demo

Design

Usage

Uses in desktop and mobile.

Only to be used when only a single option can be selected from a TextList.

Focus state has the same 4px outline as per the buttons.

Hover state has card shadow and purple stroke, selected - a tick.

Code

import { CardControls } from '@shieldpay/bumblebee/card-controls';

<CardControls
  name="the-group-name"
  label="Card controls"
  value="id_1"
  options={[
    {
      label: (
        <>
          <CardControls.Heading Icon={AlertIcon}>juan</CardControls.Heading>
          <Text paragraph>Hey</Text>
        </>
      ),
      value: 'id_1',
    },
    {
      label: (
        <>
          <CardControls.Heading Icon={AlertIcon}>double</CardControls.Heading>
          <Text paragraph>Hey</Text>
        </>
      ),
      value: 'id_2',
    },
  ]}
  onChange={changeHandler}
/>;