ClosingCta

The primary band that closes the home, careers and FAQ pages: the ask, the two ways to answer it, and, where the page offers one, the email address for anyone who would rather write.

import { ClosingCta } from '@zitdevs/ui';

Examples

The first step is a conversation.

Tell us what you are trying to launch.

Book a consultationContact us

Prefer email? [email protected]

<ClosingCta
  headingId="closing-heading"
  title="The first step is a conversation."
  body="Tell us what you are trying to launch."
  primary={{ label: 'Book a consultation', href: '/book-a-consultation' }}
  secondary={{ label: 'Contact us', href: '/contact' }}
  emailLead="Prefer email?"
  email="[email protected]"
/>

Its calls to action through a router’s link, such as Next’s Link, with linkAs; the mailto: link stays a plain <a>. See Router links.

The first step is a conversation.

Tell us what you are trying to launch.

Book a consultationContact us

import Link from 'next/link';

<ClosingCta
  linkAs={Link}
  headingId="closing-heading"
  title="…"
  body="…"
  primary={primary}
  secondary={secondary}
/>;

Props

Prop	Type	Default	Notes
headingId	string	required	The h2’s id, which names the band.
title	string	required	An h2, SectionHead cta.
body	string	required
primary	{ label: string; href: string }	required	The inverse button, with the arrow.
secondary	{ label: string; href: string }	required	The inverseOutline button.
emailLead	string	—	Leads the address, such as “Prefer email?”.
email	string	—	Linked with mailto:. The line shows only with both emailLead and it.
linkAs	LinkComponent	'a'	Renders both calls to action: Next’s Link, or any router’s.
ref	Ref<HTMLElement>	—	The <section>.
className	string	—	Placement.
anything else	<section> attributes	—	Except aria-labelledby, which headingId sets.

Exported type: ClosingCtaProps.

Accessibility

• A region named by its h2, through headingId.
• Both calls to action are links named by their labels, and long labels wrap. The address is a link named by the address itself.
• A page with no address leaves both emailLead and email out, and the band ends on its calls to action, with no space left where the line would sit.

Without JavaScript

It needs none: a heading, paragraphs and links, rendered as a Server Component, through a router’s link too.

Theming

primary, with on-primary text, the inverse and inverseOutline buttons and a linkInverse address. A taller rhythm than ClosingSection, 72 / 112px, which is why it is its own section and not a Band. The lines pattern, kept clear of the copy by --pattern-band-start, is brand blue artwork: override --pattern-lines-blue to re-theme it.