Layout & Structure
Card
Lightweight content card with a title, subtitle, background, rounded corners, padding, and shadow controls. Drop it in for feature callouts, info boxes, or any grouped content block that needs a clean visual boundary.
Presets adjust padding and font sizes in one tap - no manual tuning needed.
Three sliders control shadow independently - add just enough lift without overdoing it.
Available on all plans.
Four things worth knowing
Title and subtitle out of the box
The card renders a title and subtitle with their own color controls. Both are plain text - edit them in the Content tab. If you need richer content inside a card, make a dedicated variant instead of adding more fields here.
Size presets keep screens consistent
Pick sm, md, or lg and padding plus font sizes adjust together. Use the same preset across all cards on a screen and the sizing stays coherent without manual tweaking.
Shadow with three independent controls
Shadow Depth, Shadow Opacity, and Shadow Radius are separate sliders. This lets you dial in a subtle elevation (low depth, low opacity) or a strong lifted card (higher values across all three) without them interfering with each other.
Flexible sizing
Width and height default to 100%. Pass customWidth or customHeight for a fixed pixel size - the component prefers those over the width/height props when both are set.
Find it, drop it, style it
Where to find itAdd it to any screen
- Component picker → Layout → Card.
- Drop it on any screen.
- Edit Title and Subtitle in the Content tab.
Before you publishThree things to check
- Pick a Size preset that matches the surrounding components.
- Set Corner Radius and Background to match the screen’s design language.
- Keep shadow subtle - Shadow Depth 2–4 and Shadow Opacity 0.08–0.15 works for most screens.
Content, layout, and sizing
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | ’Card Title’ | Main heading text inside the card. |
subtitle | string | ’Card subtitle or description’ | Supporting text below the title. |
size | select | ’md’ | sm, md, or lg - affects padding and font sizes together. |
padding | number | 16 | Internal spacing override. Set via the Style tab slider. |
borderRadius | number | 12 | Corner rounding in pixels. |
width | number | - | Explicit width override. |
height | number | - | Explicit height override. |
customWidth | number | - | Runtime width override - takes priority over width. |
customHeight | number | - | Runtime height override - takes priority over height. |
Make it yours
Every colour and shadow control below is yours to change. The defaults are a neutral starting point - adjust them to match the brand without touching anything else.
| Prop | Default | What it controls |
|---|---|---|
backgroundColor | #ffffff | Card background colour. |
titleColor | #333 | Title text colour. |
subtitleColor | #666 | Subtitle text colour. |
elevation | 3 | Shadow depth - primarily affects Android elevation. |
shadowColor | #000 | Shadow colour. |
shadowOpacity | 0.1 | Shadow transparency (0–1). |
shadowRadius | 4 | Shadow blur radius. |
borderColor | #e0e0e0 | Border colour when a border is applied. |
borderWidth | 0 | Border width in pixels. 0 = no border. |
Common mistakes to avoid
Use size presets for consistency
Manually adjusting padding and font sizes on individual cards causes screens to look uneven. Pick a size preset and stick to it across all cards on the same screen.
Keep shadows subtle
Strong shadows compete with content and age quickly in flat design systems. Shadow Depth 2–4, Opacity 0.08–0.15, and Radius 4–6 produces a clean, modern lift on most backgrounds.
Don’t overload this component
Card is intentionally simple - title and subtitle only. If you need images, actions, badges, or multiple text sections inside a card, duplicate BuilderCard.tsx and build a dedicated variant rather than adding props here.
customWidth / customHeight take priority
If both width and customWidth are set, customWidth wins. If neither is set, the card fills its container. Only pass explicit sizes when the layout genuinely requires a fixed dimension.