ClosingSection

The primary band that closes a page: the ask, and the two ways to answer it.

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

Examples

Work with a partner that stays.

Tell us where your technology stands today.

Book a consultationContact us

No commitment until the scope is agreed.

<ClosingSection
  id="story-closing"
  title="Work with a partner that stays."
  body="Tell us where your technology stands today."
  primary={{ label: 'Book a consultation', href: '/book-a-consultation' }}
  secondary={{ label: 'Contact us', href: '/contact' }}
/>

Both calls to action through a router’s link, such as Next’s Link, with linkAs. See Router links.

Work with a partner that stays.

Tell us where your technology stands today.

Book a consultationContact us

import Link from 'next/link';

<ClosingSection
  linkAs={Link}
  id="closing"
  title="…"
  body="…"
  primary={primary}
  secondary={secondary}
/>;

Props

Prop	Type	Default	Notes
id	string	required	Unique on the page. The heading names the band through it.
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.
note	string	—	A line under the calls to action, behind a marker.
linkAs	LinkComponent	'a'	Renders both calls to action: Next’s Link, or any router’s.
ref	Ref<HTMLElement>	—	The band’s <section>.
className	string	—	Placement.
anything else	<section> attributes	—	data-band reaches the band.

Exported type: ClosingSectionProps. It is a Band with fill="primary".

Accessibility

• A region named by its h2, through headingIdOf(id).
• Both calls to action are links named by their labels; long labels wrap rather than run past the column.
• The pattern is hidden decoration.

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 and marker, and the inverse and inverseOutline buttons. The pattern is opaque, and white over it reads at only 3.2:1, so --pattern-band-start keeps it 136px clear of the copy on a wide screen: keep the copy’s max-w-180. The lines pattern is brand blue artwork, which does not follow --ui-primary; override --pattern-lines-blue to re-theme it.

Use instead: a band that ends on the email address → ClosingCta.