Surfaces
The boxes a screen is built from: cards, stat tiles, the welcome banner, settings sections, the list of things that need attention, dividers and selectable tiles. Each one reflows from 320px up and keeps its edges in Windows high contrast.
7 pages, 13 exports
- Card
- CardHeader
- CardTitle
- CardBody
- CardFooter
- StatCard
- Hero
- SettingsSection
- AttentionItem
- AttentionList
- Divider
- OptionCard
- OptionCardGroup
ImportLink to the section Import
Each group has its own entry, so an app that needs only this group loads only this group. Everything is also exported from @skribly/ui.
import { Card, CardHeader, CardTitle, CardBody, … } from '@skribly/ui/surfaces'Pages in this groupLink to the section Pages in this group
- CardA bordered surface for one block of content. Use the header, body and footer parts for a titled panel with actions; use the card alone with padding for a simple box.Card, CardHeader, CardTitle, CardBody, CardFooter
- StatCardOne number with its label, for the row of figures at the top of a dashboard. Give it href or onPress when the number leads to the full list.StatCard
- HeroThe welcome banner at the top of a home screen, with a greeting, one paragraph and the first actions. Use it once per page.Hero
- SettingsSectionA titled block of a settings screen. The rows inside get a line between each; turn framed off to place cards of your own under the heading.SettingsSection
- AttentionItemA short list of what needs the reader today: a count, what it is, why, and the way there. Mark blocking items urgent. When the list is empty, pass an empty state with the next step.AttentionItem, AttentionList
- DividerA line between groups of content, across or upright, with an optional word such as Or in the middle.Divider
- OptionCardSelectable tiles with a preview, for choices people judge by eye: themes, fonts, animations. One choice makes a radio group, selectionMode="multiple" a checkbox group.OptionCard, OptionCardGroup