A bordered surface with optional header and footer bands, divided by hairlines and inset by a single padding switch.
Body onlyHeaderFooterFlush
api-gateway
Deployed 14 minutes ago from the release branch.
Owner: ana@example.com
<Card> {#snippet header()}<strong>api-gateway</strong>{/snippet} Deployed 14 minutes ago from the release branch. {#snippet footer()}<span>Owner: ana@example.com</span>{/snippet}</Card>Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { Card } from '@chanrg/4ui';<Card> {#snippet header()}<strong>api-gateway</strong>{/snippet} Deployed 14 minutes ago from the release branch. {#snippet footer()}<span>Owner: ana@example.com</span>{/snippet}</Card>Flush
Turn padded off when the body is a table, a chart, or media that should meet the border directly.
Projects
| Requests | 428.6 |
| Response time | 82.1 |
| CPU load | 78.4 |
| Queue depth | 3.1 |
<Card padded={false}> {#snippet header()}<strong>Projects</strong>{/snippet} <DataTable {columns} {rows} /></Card>API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
padded | boolean | true | Applies the standard inset to every section. Turn off for flush media or tables. |
header / children / footer | Snippet | — | Each band renders only when supplied, so a body-only card carries no dividers. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
--4ui-border-soft | Hairline under the header and above the footer. |
--4ui-shadow-card | Resting elevation of the surface. |
Accessibility
- A plain container: the headings, landmarks, and controls you render inside keep their own semantics.
- Section dividers are borders rather than separators, so nothing extra is announced.