CTA Link
BlockBasic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { CTALink } from "@corew500/ui/blocks/cta-link"
<CTALink>Content</CTALink>API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading* | string | — | Main heading |
| description | string | — | Description text |
| action* | CTALinkAction | — | Primary action (required) |
| secondaryAction | CTALinkAction | — | Secondary action button (optional) |
| icon | enum | — | Optional icon to display |
| iconPosition | enum | top | Icon position on desktop |
| gradient | CTALinkGradient | — | Gradient configuration (for gradient variant) |
| features | CTALinkFeature[] | — | List of features/benefits to display |
| inlineLink | CTALinkInlineLink | — | Inline text link (alternative to secondaryAction button) |
| variant | enum | default | — |
| align | enum | left | — |
Accessibility
Keyboard Navigation
- Action buttons render as proper anchor elements for keyboard navigation
Screen Readers
- - Uses semantic <section> element with aria-label for screen readers
- Icon uses aria-hidden="true" as it's decorative
- Card variant wraps content in semantic section within the card
Additional
- External links include rel="noopener noreferrer" for security
- Feature list uses semantic <ul>/<li> elements
Localization
Translatable Content
- - Component accepts pre-resolved translated strings
- All user-facing text is customizable via props:
- `heading` - Main heading text
- `description` - Optional description text
- `action.label` - Primary button text
- `secondaryAction.label` - Secondary button text (if provided)
- `features[].text` - Feature list items
- `inlineLink.preText` / `inlineLink.linkText` - Inline link text
- No internal text hardcoding - all strings flow through props