Components
Split Card
One card shell with stacked titled panels and flush dividers.
A Card that stacks as many panels as you need, with a
flush Divider between each. Each panel takes a
title sized like Section Card (sm / md).
An optional footer uses the same action strip as a normal Card.
Usage
import {
KeyValue,
KeyValueRow,
SplitCard,
SplitCardFooter,
SplitCardPanel,
} from "@sophic/portal-ui";
<SplitCard>
<SplitCardPanel title="Valuation" titleSize="sm" flushBody>
<KeyValue variant="borderless" density="condensed">
<KeyValueRow label="Market value" value="€18,706.20" />
</KeyValue>
</SplitCardPanel>
<SplitCardPanel title="Quantity" titleSize="sm" flushBody>
<KeyValue variant="borderless" density="condensed">
<KeyValueRow label="Total shares" value="20" />
</KeyValue>
</SplitCardPanel>
<SplitCardFooter>
<Button size="sm">Action</Button>
</SplitCardFooter>
</SplitCard>Props
SplitCard
Prop
Type
Default
SplitCardPanel
Prop
Type
Default
SplitCardFooter
Changelog
- 1 October 2026 — Dropped
surface. Full notes - 29 September 2026 — Added (panels + flush divider + optional footer).
flushBodymatches Section Card for Key Value lists. Full notes