Components
CtaBand
Unstable: the last ask on a page, a heading, one line and two actions centred on a dark band. Import it from @nizivo/react/unstable/cta-band.
Examples
Basic
A closing ask: an Accent primary action and a quiet Secondary one.
Ship your next screen with Nizivo
One library, two themes, every state designed.
import type { JSX } from 'react';
import { Button } from '@nizivo/react/button';
import { CtaBand } from '@nizivo/react/unstable/cta-band';
export function CtaBandExample(): JSX.Element {
return (
<CtaBand
title="Ship your next screen with Nizivo"
description="One library, two themes, every state designed."
actions={
<>
<Button variant="accent">Get started</Button>
<Button variant="secondary">Read the docs</Button>
</>
}
/>
);
}
Import
import { CtaBand } from '@nizivo/react/unstable/cta-band';
// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/cta-band.css';Static or interactive
Server. No client JavaScript of its own. How to choose.
Use
title is the band's heading (h2 by default), description one line, and actions two
Buttons: one primary, one quiet. The design makes the primary one
Accent, since a Primary green sinks into the band. The band is dark in both themes, with
text/on-dark.
The background
The design's background is the Aurora Dark shader: pass
background={<ShaderSurface variant="aurora-dark" />} (ShaderSurface)
and a soft dark scrim keeps the middle, where the text sits, dark. Without it the band is drawn with
CSS gradients; background takes any picture in its place, hidden from assistive technology.
Props
Server component Renders data-slot="cta-band" with the class nz-cta-band. Props: CtaBandProps. Source: src/unstable/cta-band/cta-band.tsx.
| Name | Type | Default | Description |
|---|---|---|---|
actions | ReactNode | – | The two actions: an Accent Button and a Secondary one. |
background | ReactNode | – | Replaces the CSS background. Decorative: hidden from assistive technology. |
description | ReactNode | – | |
headingLevel | 2 | 3 | 2 | The title's level. |
render | RenderProp<Record<string, never>> | – | Must render a |
titlerequired | ReactNode | – |
- Also takes every attribute of
<section>exceptchildren,title. (Omit<ComponentPropsWithRef<"section">, "title" | "children">)
render takes an element, or, in client code, a function of the props and no state.
Other exports
CtaBandPropstypeimport type { CtaBandProps } from '@nizivo/react/unstable/cta-band'The props of
CtaBand, listed above.
Data attributes and slots
Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.
| Slot | Rendered by | Data attributes |
|---|---|---|
cta-band.nz-cta-band | CtaBandroot (takes render) | none |
cta-band-title.nz-cta-band-title | CtaBandinner element (CSS only) | none |
CSS hooks
Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.
This stylesheet reads no public hook.
Layers: nz.components. Classes: .nz-cta-band, .nz-cta-band-actions, .nz-cta-band-background, .nz-cta-band-content, .nz-cta-band-description, .nz-cta-band-title, .nz-shader-surface.
Tokens this stylesheet reads (12)
--nz-bg-accent, --nz-bg-brand, --nz-bg-code, --nz-font-body-l, --nz-font-display-m, --nz-radius-2xl, --nz-space-10, --nz-space-3, --nz-space-5, --nz-space-6, --nz-text-on-dark, --nz-tracking-display-m
Accessibility
Nothing in this component takes focus or keyboard input.
Keyboard
None.
CopyButton
Unstable: copies text to the clipboard, then reads "Copied" for 2 seconds and announces it. It lives on the dark code surface of a CodeBlock. Import it from @nizivo/react/unstable/copy-button.
DataView
The same records as a table on a wide screen and as a list on a narrow one. The server renders both and a container query shows one, by the view's own width, so nothing changes on hydration.