block · 71/108
Call to Action
Close a page with one goal, supporting copy, and reassurance.
Install
Install manuallyView source on GitHub
Composes
- call-to-action.tsx8
Accessibility3 checks
- The section is labelled by its heading, and actions are links with descriptive text.
- The secondary action is underlined text, so the two priorities differ without relying on color.
- Reassurance is a list of Trust Panel badges; name it with aria-label.
Marketing sites
Route tomorrow’s requests with Ferrow
Connect your inbox in ten minutes. Your first week of jobs imports automatically.
- No card required
- Cancel from settings
- Keep your data if you leave
Code example
usage.tsximport { CallToAction, CallToActionAction, CallToActionActions, CallToActionContent, CallToActionDescription, CallToActionReassurance, CallToActionReassuranceItem, CallToActionTitle, type CallToActionVariant,} from "@/components/uai/call-to-action";export function CallToActionPreview({ variant = "banner" }: { variant?: CallToActionVariant }) { return ( <CallToAction variant={variant}> <CallToActionContent> <CallToActionTitle>Route tomorrow’s requests with Ferrow</CallToActionTitle> <CallToActionDescription> Connect your inbox in ten minutes. Your first week of jobs imports automatically. </CallToActionDescription> </CallToActionContent> <CallToActionActions> <CallToActionAction href="#start-trial">Start a 14-day trial</CallToActionAction> <CallToActionAction href="#demo" priority="secondary"> Book a 20-minute demo </CallToActionAction> </CallToActionActions> <CallToActionReassurance aria-label="Trial terms"> <CallToActionReassuranceItem>No card required</CallToActionReassuranceItem> <CallToActionReassuranceItem>Cancel from settings</CallToActionReassuranceItem> <CallToActionReassuranceItem>Keep your data if you leave</CallToActionReassuranceItem> </CallToActionReassurance> </CallToAction> );}Manual installation
call-to-action.tsxLoading component source…