BumblebeeBumblebee

Divider

Live demo

Horizontal divider

Example heading before Divider

Example text after Divider

Vertical divider

Divider colour

Example with alert-500 colour

Design

Usage

The divider is used to divide different sections of content.

Anatomy

The divider is simply a 1px line using colour: global/neutral-250 The divider adjust to the width of the container.

Placement

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

Placement

Use the divider on the heading for the review page on the onboarding flow.

Code

import { Divider } from '@shieldpay/bumblebee/divider';

<Divider />;