Balance Logo
Balance
Reckon Design System

Card

Cards are highly flexible component to display a subject with its related information.
Install
pnpm add @reckon-web/card
Import usage
import {
Card,
RadioCardGroup
} from '@reckon-web/card';
  • Code
  • API

Alternatives

  • Tile — For displaying a single piece of information or interaction regarding a subject.

When to use

Here are some common use cases for cards:

  • To contain related groups of information or form fields
  • To provide a summary of information
  • To guide users to take actions

Card usage

Card will fill the height and width of its container so it's up to the consumer to control width and height of the card through a container.

For more concrete examples check out the patterns section.

Edit in Playroom

density

The density of a card is defined as the white space between the border and the content area. It's set through the density prop and supports three values: compact, regular, spacious.

The default density of a card is regular.

children

The card component itself is a simple container and is not interactive. Consumers are free to compose rich content inside the card, similar to how normal page is composed.

Checkout out the patterns section for some examples of what's possible inside a Card.

RadioCardGroup

Presents a list of options where only one choice can be selected in a Card interface.

name

A unique name for the radio group to help identify it in the dom tree for testing purposes. The user will experience strange behaviour if there are 2 radio groups with the same name on a page. If you are unsure about the name, it is better to leave it empty which will result in the componenet assigning itself a unique random number.

legend

Used to describe the purpose of the radio group to help with accessibility. This value is not rendered to the screen and is only seen by screen readers.

value

The currently selected value for the radio group.

onChange

The function to run in order to update state when the user selects an option.

onSelectFocusRef

Sometimes selecting a radio card can reveal a sub-form for the user to select from. In this instance, we want to focus the sub-form as soon as the user selects the relevant radio card. The onSelectFocusRef prop can be used to achieve this by passing a ref of a focusable element from the sub-form to it.

Check this example for more details.

RadioCardGroup primitives

RadioCardGroup exposes only one primitive: RadioCardGroup.Item

RadioCardGroup.Item

RadioCardGroup.Item can only be used inside a RadioCardGroup. It takes the same props as Card plus some extra radio props.

value

Used to describe the value of the radio item. This is the value that will be emitted to the onChange prop of CardRadioGroup

label

Used to describe the option. It takes a ReactNode so consumers are free to compose rich content.

Simple RadioCardGroup usage

RadioCardGroup can render RadioCardGroup.Item as children to present a list of cards a user can select from.

Complex RadioCardGroup usage

In this example we want to make the user select specific access levels in the form of checkboxes when the "Partial access" card is selected.

Patterns

Cards content and groups of cards can be composed in a variety of ways. Below are some examples of the possiblities.

Add action card

Edit action card

Horizontal group of cards

Vertical group of cards

Copyright © 2022 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo