Glowup
FOUNDATIONS · 07 / 89
CardCover
CardCover — a Material You foundations component for React Native and web.
󱀫
packages/ui/src/components/CardParts/CardCover.tsx
Live demo
Line 4
Scheduled maintenance
Properties
2 controls
Ratio (w / h)
Alt text
Usage
CardCover.tsx
<CardCover alt="Line 4" />
Variants
The states and shapes this component is meant to be used in.
Ratios
The cover keeps its aspect ratio as the card resizes; 16:9 is the default.
16:9 — the default
1:1 — square
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
5 on CardCoverProps
alt
required
string
Alternative text — an unnamed image is invisible to a screen reader.
source
required
ImageSourcePropType
ratio
number
default: 16 / 9
Width divided by height. M3 card covers default to 16:9.
style
StyleProp<ViewStyle>
testID
string
󰅁
Previous
CardContent
Next
CardActions
󰅂