Split cards

Related facts stay grouped in one frame instead of splitting into separate cards.

What this solves

Gestalt hierarchy: panes or rows that share one card read as one comparison, not as unrelated numbers the reader has to mentally join. A hairline or a gap does the grouping work that a full card border would otherwise force onto separate cards.

Use it when

Two related breakdowns of the same metric, side by sidewalmart-mvp Admin.tsx: the two-pane usage grid, each pane its own section label and table
A repeating list where every other row needs a visual seamwalmart-mvp Home.tsx: the fine-grain catalog snapshot, odd cells take sm:border-l
Three or more facets of one dataset, with a card-level actionthe header-action variant below, an Export CSV action riding the card toolbar

Rendered

Fixture data; check both themes.

Two panes, coarse split plus fine-grain hairline

External usage

By organization

Acme Distribution128
Karlin Auto61
Northside Parts17

Days with usage

Aug 1142
Aug 1238
Aug 1351

Catalog snapshot

Titles written9,204

Errors auto-resolved312

Errors manually resolved88

Rows ingested40,119

Three panes, with a card-level toolbar action

External usage

Last 7 days, three ways

By organization

Acme Distribution128
Karlin Auto61
Northside Parts17

By day

Aug 1142
Aug 1238
Aug 1351

By module

Part Type84
Scrape55
Normalize40
Content27

patterns/split-cards/example.tsxCopy this into a fresh route and it renders as above.

1import { Card, RenderIcon } from "@versable-git/ui";
2
3// Two grains of one idea: a card split into two independently-headed panes,
4// and a card whose repeating rows take a hairline divider between columns.
5const orgs = [
6  { name: "Acme Distribution", runs: 128 },
7  { name: "Karlin Auto", runs: 61 },
8  { name: "Northside Parts", runs: 17 },
9];
10
11const days = [
12  { day: "Aug 11", runs: 42 },
13  { day: "Aug 12", runs: 38 },
14  { day: "Aug 13", runs: 51 },
15];
16
17const snapshot = [
18  { Icon: "Success", label: "Titles written", value: "9,204" },
19  { Icon: "Refresh", label: "Errors auto-resolved", value: "312" },
20  { Icon: "Edit", label: "Errors manually resolved", value: "88" },
21  { Icon: "Database", label: "Rows ingested", value: "40,119" },
22] as const;
23
24export function SplitCards() {
25  return (
26    <div className="flex flex-col gap-6">
27      <Card title="External usage" noAnimate>
28        <div className="grid gap-8 md:grid-cols-[minmax(0,1.2fr)_minmax(200px,0.8fr)]">
29          <div>
30            <div className="text-base-content/45 mb-2 text-xs font-medium tracking-wide uppercase">By organization</div>
31            <ul className="flex flex-col gap-1">
32              {orgs.map((o) => (
33                <li key={o.name} className="flex justify-between text-sm">
34                  <span>{o.name}</span>
35                  <span className="text-base-content/65 tabular-nums">{o.runs}</span>
36                </li>
37              ))}
38            </ul>
39          </div>
40          <div>
41            <div className="text-base-content/45 mb-2 text-xs font-medium tracking-wide uppercase">Days with usage</div>
42            <ul className="flex flex-col gap-1">
43              {days.map((d) => (
44                <li key={d.day} className="flex justify-between text-sm">
45                  <span>{d.day}</span>
46                  <span className="text-base-content/65 tabular-nums">{d.runs}</span>
47                </li>
48              ))}
49            </ul>
50          </div>
51        </div>
52      </Card>
53
54      <Card title="Catalog snapshot" noAnimate>
55        <div className="grid grid-cols-1 sm:grid-cols-2">
56          {snapshot.map((s, i) => (
57            <div
58              key={s.label}
59              className={`border-base-300/70 flex items-center gap-3 border-t px-4 py-3 first:border-t-0 sm:nth-[-n+2]:border-t-0 ${i % 2 === 1 ? "sm:border-l" : ""}`}
60            >
61              <span className="bg-base-200 text-base-content/50 grid size-7 shrink-0 place-items-center rounded-md">
62                <RenderIcon Icon={s.Icon} size={15} />
63              </span>
64              <span className="text-base-content/75 flex-1 text-sm">{s.label}</span>
65              <span className="text-sm font-medium tabular-nums">{s.value}</span>
66            </div>
67          ))}
68        </div>
69      </Card>
70    </div>
71  );
72}
73

Where it ships

walmart-mvp/frontend/src/pages/Admin.tsx:674-730the two-pane grid: gap-based split, each pane with its own section label and table
walmart-mvp/frontend/src/pages/Home.tsx:95-113the fine grain: repeating rows in a 2-column grid where odd cells take sm:border-l

App-specific: The coarse split is gap-based rather than a hairline, and pane widths pin the secondary pane with minmax. Real cards feed both panes from one loader payload; the fine-grain rows swap the value for a Skeleton while loading.