Glowup
FOUNDATIONS · 05 / 89
CardTitle
CardTitle — a Material You foundations component for React Native and web.
󱀫
packages/ui/src/components/CardParts/CardTitle.tsx
Live demo
Line 4
Scheduled maintenance
Properties
2 controls
Title
Subtitle
Usage
CardTitle.tsx
<CardTitle title="Line 4" />
Variants
The states and shapes this component is meant to be used in.
Title and subtitle
Invoice #1042
Acme Inc. · due 12 Oct
Leading and trailing slots
`left` and `right` take any node — an Avatar, an overflow menu — and the text truncates rather than pushing them out.
Marta Rossi
Lead product designer
A title long enough that it has to be truncated somewhere
Two lines of subtitle are allowed before this one is clipped too, which is what subtitleNumberOfLines controls.
In a whole card
Quarterly report
Published 3 days ago
All four parts in one composition: cover, header, body, action row.
API reference
Generated from the library's TypeScript, so it cannot drift from the implementation.
Props
7 on CardTitleProps
title
required
React.ReactNode
left
React.ReactNode
Leading slot — an `Avatar`, an `Icon`, a `StatusBadge`.
right
React.ReactNode
Trailing slot — an `IconButton`, a `Menu` anchor, a `Chip`.
style
StyleProp<ViewStyle>
subtitle
React.ReactNode
subtitleNumberOfLines
number
default: 2
titleNumberOfLines
number
default: 1
󰅁
Previous
Card
Next
CardContent
󰅂