CardSection

One topic of a white card, inset in grey: its heading led by an icon, something beside it, and its way forward at its foot. The Daily overview is made of them.

In a card

The card is white with a hairline edge and an 8px inset; the sections sit in it a step apart, their corners the card's less the inset.

Inbox

2 conversations need you

Open Inbox

The team

Kelso5 bookings, the first at 09:30
MilaNo bookings yet

Open today

import { CardSection } from "@/components/shared/card-section";

<section className="squircle-4xl border-ink/8 flex flex-col gap-2 border bg-white p-2">
  <CardSection
    icon={Inbox}
    label="Inbox"
    aside={<CountDot count={2} label="2 need you" />}
    action={<ButtonLink variant="secondary" size="sm" href="/inbox?filter=needs">Open Inbox</ButtonLink>}
  >
    <p>2 conversations need you</p>
  </CardSection>
  <CardSection icon={Users} label="The team" action={…}>
    <DayList>…</DayList>
  </CardSection>
</section>

Guidelines

One topic a section, its heading in the card's type with a muted icon leading it.
The way forward goes at the section's foot, under what it leads to: one small secondary button.
What's inside on white (Stats, fields) stands off the grey; rows sit on it directly.

API reference

Prop	Type	Default	Description
label	string	—	The topic, as its heading.
icon	Icon	—	Leads the heading, muted.
aside	ReactNode	—	Beside the heading, at its end: a CountDot.
wash	"attention"	—	What needs a person now: the red of Needs you instead of grey, its icon red too. An urgent request in owner chat.
action	ReactNode	—	The way forward, at its foot: one small button.
level	3 \| 4 \| 5	4	The heading's level in the page outline.