Call to action
Closing and in-page calls to action, from a slim banner to a full form or a ledger of customer results.
Installation & usage
npx @youj/cli add marketing-ctaAlso installs button, icon-arrow-right, illustrations, magnetic, mesh-gradient, reveal, youj-ui-core.
The CLI copies the block to blocks/marketing/cta.tsx with every component it uses, so it’s yours to edit.
Every prop is optional and falls back to the demo, so it renders as you see it until you pass your own. Give it your data, rewrite or translate its strings through copy, and connect its actions:
'use client'
import Link from 'next/link'
import { MarketingCta, type MarketingCtaProps } from '@/blocks/marketing/cta'
export function MarketingCtaView({ primaryCta }: Pick<MarketingCtaProps, 'primaryCta'>) {
return (
<MarketingCta
primaryCta={primaryCta}
copy={{ title: 'Your next deploy could be your first one here' }}
linkComponent={Link}
/>
)
}Description
A closing call to action with a headline, reassurance under the button and room for a secondary link.
A slim banner for between sections, with a short line and a button. Pick it when a full closing section would be too much.
A work email and team size form beside the pitch, so interest turns into an inquiry on the spot.
A ledger of customer results and the words behind them, ending on the reader’s own line and the call to action. Pick it when evidence should lead into the ask.
Book a sales call the way a good scheduler does, one question at a time: a day and a time with the person the visitor's region puts forward, then three short rows of details with the time pinned on top, then a confirmation that says it in full. Writing instead is one link away and keeps what was typed.
Code
CTA, the Band story: the files youj add writes.
blocks/marketing
Reference
Props8 props, 1 types
Props
| Prop | Type | |
|---|---|---|
title | stringThe headline. Overrides | – |
description | stringThe line under the headline. Overrides | – |
illustration | IllustrationSlotThe picture on the end side: a scene from the illustrations by id, your own node, or default 'deploy' | 'deploy' |
primaryCta | CtaBandCtaThe magnetic primary button. default Start deploying → `#signup` | Start deploying → `#signup` |
secondaryCta | CtaBandCta | nullThe quiet link beside it; default Talk to sales → `#sales` | Talk to sales → `#sales` |
copy | Partial<MarketingCtaCopy>Any of the block's strings, to rewrite or translate. | – |
headingLevel | 1 | 2 | 3The headline's level. default 2 | 2 |
linkComponent | LinkComponentThe element every internal link renders as, e.g. Next.js default 'a' | 'a' |
CtaBandCta
| Prop | Type | |
|---|---|---|
labelRequired | string | – |
hrefRequired | string | – |
onClick | MouseEventHandler<HTMLAnchorElement> | – |
Strings2 keys for copy
Strings
copy takes any of these keys; the rest keep their defaults. A key whose text holds a value (a count, a name) takes a function.
titledescriptionBuilt from5 components
Built from
Components used
Accessibilitylandmarks, headings, forms
Accessibility
Each call to action is a <section> named by its own heading (aria-labelledby). The heading is an h2 by default; headingLevel changes it.
Form and Contact sales use real form elements with labelled fields. Contact sales moves focus to each step's heading as it arrives; its days and times are labelled toggle groups (one tab stop, arrow keys between them) that read each day's open times and say a taken time is taken; a missing time or field is said in an alert and focused; the region is a labelled menu. Proof marks its toggle with aria-pressed, announces changes in a live region and hides decorative marks from assistive technology.
Banner checks the reduced-motion setting. The links and buttons are real a and button elements with the kit’s focus ring.