Components
CaretHeadline
Unstable: a headline that ends in a blinking underscore caret, which stays on under Reduced motion. Import it from @nizivo/react/unstable/caret-headline.
Examples
Basic
A headline with its caret; under Reduced motion the caret stays on.
Build calm product UI
import type { JSX } from 'react';
import { CaretHeadline } from '@nizivo/react/unstable/caret-headline';
export function CaretHeadlineExample(): JSX.Element {
return <CaretHeadline level={2}>Build calm product UI</CaretHeadline>;
}
Import
import { CaretHeadline } from '@nizivo/react/unstable/caret-headline';
// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/caret-headline.css';Static or interactive
Server. No client JavaScript. How to choose.
Use
The children are the heading (level, h1 by default). The caret blinks on and off every 530 ms; it
is decoration, hidden from assistive technology, and stays on under Reduced motion.
Props
Server component Renders data-slot="caret-headline" with the class nz-caret-headline. Props: CaretHeadlineProps. Source: src/unstable/caret-headline/caret-headline.tsx.
| Name | Type | Default | Description |
|---|---|---|---|
level | 1 | 2 | 3 | 1 | The heading's level. |
render | RenderProp<Record<string, never>> | – | Must render a heading. |
- Also takes every attribute of
<h1>. (ComponentPropsWithRef<"h1">)
render takes an element, or, in client code, a function of the props and no state.
Other exports
CaretHeadlinePropstypeimport type { CaretHeadlineProps } from '@nizivo/react/unstable/caret-headline'The props of
CaretHeadline, 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 |
|---|---|---|
caret-headline.nz-caret-headline | CaretHeadlineroot (takes render) | 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-caret-headline, .nz-caret-headline-caret.
Tokens this stylesheet reads (7)
--nz-bg-brand, --nz-duration-pulse, --nz-font-heading-h1, --nz-space-1, --nz-space-4, --nz-text-primary, --nz-tracking-heading-h1
Accessibility
Nothing in this component takes focus or keyboard input.
Keyboard
None.
Card
A surface with optional header, title, description, action, body and footer parts. The inverse tone flips every token inside it; brand and accent are the tinted surfaces of the dashboard widgets (KpiTile's tone), with no stroke.
ChatMessage
Unstable: one turn of a conversation, the person's or the assistant's, with its sender named in text, and ChatLog, the live region that holds them. Import them from @nizivo/react/unstable/chat-message.