A versatile component for displaying a headline with optional body text and add-ons. TextPairing is the building block for list items, cards, and other compound components.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| headline | ReactNode | Yes | - | Primary text content |
| body | ReactNode | No | - | Secondary text below headline |
| headlineColor | TextColor | No | "primary" | Headline text color |
| headlineSize | Size | No | "medium" | Headline text size |
| headlineBold | boolean | No | false | Bold headline text |
| headlineAddOn | ReactNode | No | - | Element displayed after headline |
| bodyColor | TextColor | No | "secondary" | Body text color |
| bodySize | Size | No | "medium" | Body text size |
| bodyEllipsis | boolean | No | false | Truncate the body to one line |
| addOn | ReactNode | No | - | Element displayed beside the text content |
| addOnPosition | "start" | "end" | No | "start" | Add-on placement |
| gap | Gap | No | "medium" | Space between add-on and text |
| padding | Padding | No | - | Internal padding |
| align | Align | No | "stretch" | Vertical alignment |
| grow | boolean | No | false | Allow component to grow |
| shrink | boolean | No | false | Allow component to shrink |
At its simplest, TextPairing displays a headline and body text vertically stacked. Body text wraps by default. Dense compounds such as ListItem opt into single-line truncation explicitly.
<TextPairing headline="Headline" body="Body text" />
<TextPairing
headline="Bold headline"
headlineBold
body="With supporting body text"
/>
Control the size and color of both headline and body independently.
<TextPairing
headline="Large headline"
headlineSize="large"
headlineBold
body="Smaller subtle body"
bodySize="small"
bodyColor="subtle"
/>
<TextPairing
headline="Highlight headline"
headlineColor="highlight"
body="Secondary body text"
/>
Add icons, avatars, or other elements alongside the text content. Control placement with addOnPosition.
// Add-on at start (default)
<TextPairing
headline="Notification"
body="You have a new message"
addOn={<Icon icon="bell" color="highlight" size="large" />}
gap="medium"
/>
// Add-on at end
<TextPairing
headline="Settings"
body="Configure your preferences"
addOn={<Icon icon="settings" color="secondary" size="large" />}
addOnPosition="end"
gap="medium"
/>
Place small elements directly after the headline text, such as badges or status indicators.
<TextPairing
headline="New feature"
headlineBold
headlineAddOn={<Icon icon="star" color="highlight" size="small" />}
body="Check out what's new"
/>
Combining all options for a rich list item appearance.
<TextPairing
headline="John Doe"
headlineBold
headlineSize="large"
headlineAddOn={<Icon icon="circle-check" color="highlight" size="small" />}
body="Senior Software Engineer"
bodyColor="subtle"
bodySize="small"
addOn={<Icon icon="user" color="primary" size="xlarge" />}
gap="medium"
padding="medium"
/>
TextPairing is commonly used within: