Card · Orbex Sonar-DB Design System

Examples

Orders, with a unit, a summary, a tick bar and its link

Orders

Open total3,940 plt

Code

tsx

import { Card, CardLink, UnitMenu } from '@orbex/sonar-components/card'
import { TickBar } from '@orbex/sonar-components/tick-bar'
import { useState } from 'react'

const units = [
  { value: 'plt', short: 'plt', name: 'Pallets' },
  { value: 'kg', short: 'kg', name: 'Kilograms' },
  { value: 'items', short: 'items', name: 'Items' },
]
const perPallet: Record<string, number> = { plt: 1, kg: 420, items: 36 }

const may = [
  { label: 'Shipped', tone: 'accent', value: 1420 },
  { label: 'On hold', tone: 'strong', value: 80 },
  { label: 'Pending', tone: 'muted', value: 1100 },
] as const

/* A title, a unit, one figure, its detail and the way to the full page */
export default function Basic() {
  const [unit, setUnit] = useState('plt')
  const format = (pallets: number) => `${(pallets * perPallet[unit]!).toLocaleString('en-US')} ${unit}`
  return (
    <Card
      titleAs="h3"
      title="Orders"
      actions={<UnitMenu label="Unit" value={unit} options={units} onValueChange={setUnit} />}
      summary={{ label: 'Open total', value: format(3940) }}
      footer={<CardLink href="/patterns/overview/#card-orders">Go to Orders</CardLink>}
    >
      <TickBar label="May orders" format={format} segments={[...may]} />
    </Card>
  )
}

Sizes, variants and states

States, at rest and while the overview is edited

Light

Dark

Usage

Size: S, M, L or XL (245, 375, 405 and 535 px) in the overview grid. Without a size, the card follows its content.
Summary: one figure with its unit; tone default for figures that are not the card’s main one.
Actions: a Unit menu, and nothing else. Footer: a Card link and at most one action.
Label: only when the same card shows twice on a page, as on Cards.
How the six cards of the overview are composed, and their rules, are in Patterns › Cards.

Do and don’t

DoOne figure first, with its unit; the content explains it.

Don’tSeveral figures of the same weight: nothing says which one matters.

DoAt most one action, beside the way to the full page.

Don’tA footer of buttons: the card becomes the page it should lead to.

Accessibility

Keyboard

Key	What it does
Tab	Moves through the card’s controls in reading order: unit menu, content, footer.
Unit menu	Opens with Enter, Space or Down arrow, like any menu.
Up and Down arrows, Page Up and Page Down	On content that scrolls, once it has focus: scroll it. It takes focus only while it scrolls.
Left and Right arrows	On the chosen day of a calendar (Deliveries, Payment calendar): the previous or next day. In the month, Up and Down move a week.

Roles and attributes

Element or attribute	What it gives
`<section aria-labelledby>`	Each card is a region named by its title, so the overview can be read card by card. Where the same card shows twice, label names each copy: “Orders, size S”.
Unit menu	Named with what it shows and what that means: “Unit: plt, Pallets”, so voice control can reach it by its visible text. Its choices are a group of radio items.
Summary bar	The bar between label and value is drawn, so it is never read aloud.
`role="group" while scrolling`	Content that scrolls is a group named by its list (“Deliveries of May 12”) or by the card’s title, so focus arriving on it says what it is. The fade and the indicator are drawn and hidden.

Notes

The card is a region named by its title, so the overview reads as a list of landmarks.
The title’s level follows the page: titleAs="h3" under a page section.

Use it

Card shares its entry point and stylesheet with Card link, Card scroll, Unit menu. The tokens and the cascade layers are set once for the app: see Installation.

tsx

import { Card } from '@orbex/sonar-components/card'
import '@orbex/sonar-components/card.css'

API

Props of Card
Prop	Type	Default
`title` Required The card’s name, which also names the region for assistive technology.	`ReactNode`	—
`titleAs` Heading level of the title, to fit the page’s outline.	`'h2' \| 'h3'`	`'h2'`
`actions` Controls at the end of the header, such as a UnitMenu.	`ReactNode`	—
`summary` The figure that sums the card up, under the title: a label and a value, such as Open total and 6,720 plt.	`{ label: ReactNode; value: ReactNode; tone?: 'accent' \| 'default' }`	—
`footer` The way out of the card, usually a CardLink to the full page.	`ReactNode`	—
`size` Height in the overview grid: S, M, L or XL from the layout tokens. The header and footer stay put; content that does not fit scrolls between them. Without a size the card takes the height of its content.	`'s' \| 'm' \| 'l' \| 'xl'`	—
`label` The region’s accessible name, when the title alone would repeat on the page: the same card shown twice, as in “Orders, size S” and “Orders, size M”. By default the title names the region.	`string`	—

Also takes every attribute of the native <section> , except title, and a ref to it.