Content Lockup
Stacked or inline icon, title, and subtitle — used in tables and list rows.
Size
small
Chase CheckingJPMorgan Chase
default
Chase CheckingJPMorgan Chase
large
Chase CheckingJPMorgan Chase
Layout
stack vs inline, with and without separator.
stack
Chase CheckingJPMorgan Chase
inline (separator)
LV FundWealthsimple
inline (no separator)
LV FundWealthsimple
Title weight
medium (default)
Chase CheckingJPMorgan Chase
regular
Chase CheckingJPMorgan Chase
In table cells
| Account | Balance |
|---|---|
Chase CheckingJPMorgan Chase | $12,340 |
 Ally SavingsAlly Financial | $45,600 |
Developer
import { ContentLockup } from "@financial-tracking/design-system"API reference
| Prop | Type | Default |
|---|---|---|
icon | ReactNode | — |
titleRequired. | ReactNode | — |
subtitle | ReactNode | — |
size | "default" | "small" | "large" | "default" |
layoutinline places title · subtitle on one line. | "stack" | "inline" | "stack" |
showInlineSeparatorMiddle dot between title and subtitle when layout is inline. | boolean | true |
titleWeightUse regular for dense transaction tables. | "regular" | "medium" | "medium" |