Content Display
Service Hero
Hero banner card for builder canvas and app player, designed for key conversion actions like booking, offers, and catalogue entry points. Renders as a styled colored block with decorative accents, a faint right-side icon, optional badge/title/subtitle/highlight strip, and CTA.
Component picker → Content Display → Service Hero, then set copy, colors, and CTA action.
alignment · verticalAlignmentHorizontal and vertical content placement inside fixed-height card.
none, alert, navigate-screen, open-url, go-back; action runs only in preview.
Four things worth knowing
Full-width fixed-height hero layout
Content stacks vertically inside a fixed height block. Use alignment for horizontal placement and verticalAlignment for top/center/bottom positioning.
Decorative accents and faint icon texture
Two accent circles use accentColor, and the right-side background icon uses placeholderIconName with low opacity for visual depth.
Optional badge, overlay, and CTA
Badge appears only when showBadge is true; overlay applies when showOverlay is true with fixed opacity 0.35; CTA appears when showButton is true.
Preview-only action handling
The CTA calls handlePress, but actions are active only when isPreview is true (AppPlayer). In builder canvas, button stays visible but non-interactive.
Find it, drop it, and wire action
Where to find itAdd it to any screen
- Component picker → Content Display → Service Hero.
- Drop it on home or landing screens where one CTA should dominate.
- Set title/subtitle/highlight, then configure action type and payload.
Before you publishThree things to check
- Confirm
onPressActionandactionDatamatch (alertmessage, target screen ID, or URL). - Verify contrast for title/subtitle/button on chosen background and overlay.
- Validate alignment, vertical placement, and card height on the target screen.
Content, layout, and actions
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | configured in registry | Main hero heading text. |
subtitle, highlightText | string | ” | Optional supporting lines under the title. |
alignment, verticalAlignment | select | left, center | Horizontal and vertical content placement inside the card. |
showBadge, showButton, showOverlay | boolean | component defaults | Toggles status badge, CTA button, and color overlay. |
placeholderBackgroundColor, accentColor, overlayColor | color | component defaults | Main surface color, decorative accents, and overlay tint. |
titleColor, subtitleColor, highlightColor | color | component defaults | Text colors for title and supporting lines. |
badgeText, badgeColor, badgeTextColor | string / color | component defaults | Badge content and styling; badge dot is always green and non-configurable. |
buttonText, buttonColor, buttonTextColor | string / color | component defaults | CTA label and pill button style. |
onPressAction, actionData | select / string | none, ” | Action type and payload used by preview/runtime CTA handler. |
fontFamily, titleFontSize, subtitleFontSize | string / number | component defaults | Typography settings for heading and supporting text. |
height, borderRadius, padding | number | component defaults | Card dimensions and inner spacing. |
placeholderIconName | string | Ionicons name | Faint right-side decorative icon texture; invalid names render nothing safely. |
Make it yours
Tune visibility, color hierarchy, spacing, and action behavior from the builder editor while keeping CTA intent clear.
| Prop | Typical value | What it controls |
|---|---|---|
showBadge | true / false | Status badge visibility above title. |
showButton | true / false | CTA button visibility. |
showOverlay | true / false | Applies overlay tint at fixed 0.35 opacity. |
placeholderBackgroundColor | #6C47FF | Main card background color. |
accentColor | #8B6AFF | Decorative corner shapes color. |
overlayColor | brand tint | Overlay color for darkening/tinting. |
buttonColor, buttonTextColor | brand contrast | CTA button readability and hierarchy. |
Common mistakes to avoid
Action runs only in preview
The CTA is visible on builder canvas but does not fire action there. Test interactions in AppPlayer where isPreview is true.
Match action type and payload
Always provide compatible actionData for selected onPressAction (message, screen ID, or URL) to avoid no-op interactions.
Overlay opacity is fixed
Opacity is hardcoded to 0.35; changing it requires component code updates in BuilderPromoCard.tsx.
Sync changes across component and registry
If you add props or action types, update BuilderPromoCard.tsx, builderComponentRegistry.ts, and componentDimensions.ts when sizing behavior changes.