StatBlock

Server component, no client JSUnstable

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { StatBlock } from '@nizivo/react/unstable/stat-block';

export function StatBlockExample(): JSX.Element {
  return (
    <dl style={{ display: 'flex', flexWrap: 'wrap', gap: 48, margin: 0 }}>
      <StatBlock value="228" label="colour pairs checked" />
      <StatBlock value="106" label="components" />
      <StatBlock value="1,880" label="icons" />
    </dl>
  );
}

ImportCopy Anchor Link

import { StatBlock } from '@nizivo/react/unstable/stat-block';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/stat-block.css';

Static or interactiveCopy Anchor Link

Server. No client JavaScript. How to choose.

UseCopy Anchor Link

value is the number, formatted, in tabular figures; label says what it counts; delta takes a Delta. Each block is a term and its value, so put a row of them in a <dl>. Only real, sourced numbers: never round up for effect.

PropsCopy Anchor Link

Other exportsCopy Anchor Link

StatBlockProps type

import type { StatBlockProps } from '@nizivo/react/unstable/stat-block'

The props of StatBlock, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

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-stat-block, .nz-stat-block-delta, .nz-stat-block-label, .nz-stat-block-value.

AccessibilityCopy Anchor Link

Nothing in this component takes focus or keyboard input.

KeyboardCopy Anchor Link

None.