Tarva BXD · LumosIndex › Components › Containers
1920 × 1080 · Landscape
Index › Components › Containers
10 components
Components · Containers
Quietly holding.
The ten surfaces that gather content and give it edges — cards, expanders, dividers, tables. Each frames without shouting; accent rests until a true action asks.
CardHeader · Content · Footer · Skeleton
Calm Sage facial
A 60-minute restorative treatment. Header, Content, and Footer stack on a white surface.
Book nowDetails
Slots
Header · Title · Description · Content · Footer · Action on rounded-xl border shadow-sm. Card.Skeleton mirrors the chrome while loading. CTA is the only accent.Accordiontype · single / multiple
What's included?
Cleanse, exfoliation, mask, and a closing massage.
Cancellation policy
Aftercare
type="single" collapsible or multiple. Slots Item · Trigger · Content; the chevron rotates 180° on data-state=open.CollapsibleRoot · Trigger · Content
Show 4 more times
2:00 PM · 3:30 PM · 4:15 PM · 5:00 PM
The raw Radix primitive —
Trigger toggles Content open/closed with no built-in chrome. The thinnest expander; bring your own styling.Disclosurevariant · tone · chevronStyle
Booking details
Title plus a caption line
Chromed single panel.
variant default·card·inline, tone neutral·info·success·warning·danger (info stripe), chevronStyle chevron·caret·plus.Aspect Ratioratio · 16/9 · 4/3 · 1
16 / 9
4 / 3
1 / 1
Holds a media box at a fixed
ratio while the page reflows. Common values 16/9 · 4/3 · 1 · 21/9. A thin wrapper over Radix AspectRatio.Scroll AreaScrollBar · vertical / horizontal
Monday — 9:00 AM open
Tuesday — 9:00 AM open
Wednesday — closed
Thursday — 10:00 AM open
Friday — 9:00 AM open
Custom-styled overflow with a thin overlay thumb.
ScrollBar takes orientation vertical / horizontal.ResizablePanelGroup · withHandle
Panel A
Panel B
PanelGroup with direction horizontal / vertical, draggable Panels split by a Handle. withHandle adds the grip.Separatororientation · decorative
Treatments
Membership
ProfileBillingNotices
One hairline rule.
orientation horizontal / vertical; decorative defaults true so screen readers skip it. Driftwood-subtle ink, never accent.Tabledensity · comfortable / compact / spacious
| Client | Service | Visits | Status |
|---|---|---|---|
| Avery Lindqvist | Calm Sage facial | 12 | Active |
| Marisol Vega | Deep-tissue massage | 5 | Pending |
| Theo Nakamura | Membership renewal | 28 | Lapsed |
| Priya Anand | Lash lift | 1 | Overdue |
Slots
Header · Body · Footer · Row · Head · Cell · Caption; the density prop (comfortable · compact · spacious) sets row height. Status reads moss/amber/rust/stone — never accent.Calloutvariant · note · tip · warning · danger · quote
NoteBring a hair tie — facials work best with hair pulled back.
TipMembers save 15% on every add-on treatment.
WarningAvoid retinol for 48 hours before any peel.
Skin that's cared for is skin that glows — patience is the active ingredient.
Block note for long-form copy.
variant note · tip · warning · important · danger · quote; each maps to a severity tone. quote renders a <blockquote> with the only soft accent stripe.
8.5 × 11 · Portrait