Components
SectionHeader
Unstable: opens a marketing section with its heading and one supporting line, start-aligned or centred. Import it from @nizivo/react/unstable/section-header.
Examples
Basic
Two alignments: start for most sections, centre for a short single idea.
Everything your product needs
Tokens, components and patterns that stay consistent from the first screen to the hundredth.
Everything your product needs
Tokens, components and patterns that stay consistent from the first screen to the hundredth.
import type { JSX } from 'react';
import { SectionHeader } from '@nizivo/react/unstable/section-header';
export function SectionHeaderExample(): JSX.Element {
return (
<div style={{ display: 'grid', gap: 48 }}>
<SectionHeader
title="Everything your product needs"
description="Tokens, components and patterns that stay consistent from the first screen to the hundredth."
/>
<SectionHeader
align="center"
title="Everything your product needs"
description="Tokens, components and patterns that stay consistent from the first screen to the hundredth."
/>
</div>
);
}
Import
import { SectionHeader } from '@nizivo/react/unstable/section-header';
// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/section-header.css';Static or interactive
Server. No client JavaScript. How to choose.
Use
title is the section's heading (headingLevel, h2 by default) and description one supporting
line. It is at most 720 px wide, so a line stays under about 75 characters. align="center" suits a
short, single-idea section. No eyebrow labels: the heading says it.
Props
Server component Renders data-slot="section-header" with the class nz-section-header. Props: SectionHeaderProps. Source: src/unstable/section-header/section-header.tsx.
| Name | Type | Default | Description |
|---|---|---|---|
align | "start" | "center" | 'start' | How the text lines up: at the start edge or centred. |
description | ReactNode | – | The supporting line. |
headingLevel | 1 | 2 | 3 | 4 | 2 | The title's level. |
render | RenderProp<Record<string, never>> | – | Must render a |
titlerequired | ReactNode | – |
- Also takes every attribute of
<div>exceptchildren,title. (Omit<ComponentPropsWithRef<"div">, "title" | "children">)
render takes an element, or, in client code, a function of the props and no state.
Other exports
SectionHeaderPropstypeimport type { SectionHeaderProps } from '@nizivo/react/unstable/section-header'The props of
SectionHeader, 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 |
|---|---|---|
section-header.nz-section-header | SectionHeaderroot (takes render) |
|
section-header-description.nz-section-header-description | SectionHeaderinner element (CSS only) | none |
section-header-title.nz-section-header-title | SectionHeaderinner 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-section-header, .nz-section-header-description, .nz-section-header-title.
Tokens this stylesheet reads (6)
--nz-font-body-l, --nz-font-heading-h1, --nz-space-4, --nz-text-primary, --nz-text-secondary, --nz-tracking-heading-h1
Accessibility
Nothing in this component takes focus or keyboard input.
Keyboard
None.
SearchField
A search or filter input in a <search> landmark, with a magnifier, a clear button and an optional shortcut hint. Inside a <form method="get"> it filters with no JavaScript; inside a Field it is labelled, described and validated by the Field. It is also the top bar's search, as a real input.
SegmentedControl
A compact single choice between a few options, such as a chart's time range. Native radios inside labels, so it submits, resets and works before hydration. Inside a Field, give the Field group.