Stage banner
The announcement of a chapter: a stage and its name on one line, or, large, a stage above a title and a line — a sober eyebrow by default, a stage call that slams in for the arcade flavour.
Web only — React, from @krizaka/ui/stage-banner. Beta: its API may still change in a minor version.
When to use
- Before a chapter's heading on a told page or a tour (“Step 02 · Payments”).
- To open a section that turns the story (
size="lg"): a final chapter, a reveal.
When not to use
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { StageBanner } from "@krizaka/ui/stage-banner";Examples
Before a chapter
A stage and its name, sober then in the arcade flavour.
A section's opening
size="lg": the stage, a title and a line — sober, then a final round.
Props
Announces a chapter: a stage and its name on one line, or (size="lg") a stage, a title and a line, centred.
| Prop | Type | Default | Description |
|---|---|---|---|
stagerequired | ReactNode | — | Where the reader is: “Step 02”, “Chapter 3”, “Final round”. |
brand | string | — | A brand scope (orochia → .brand-orochia). |
name | ReactNode | — | sm: the name of the chapter, beside the stage. |
size | "sm" | "lg" | sm | sm: one line, before a chapter's heading. lg: centred, the stage above a title and a line — a section's opening. |
subtitle | ReactNode | — | lg: one line under the title. |
title | ReactNode | — | lg: the title under the stage. |
titleAs | "h2" | "h3" | "p" | p | The element of the lg title: a heading when the banner opens a section that has none. |
variant | StoryVariant | default | default: a sober eyebrow. arcade: the stage call — a skewed plate that slams in, a light that sweeps it. |
Accessibility
- A paragraph by default; the large title can be a heading (
titleAs). - Its entrance plays once in a stage and never under
prefers-reduced-motion.
Best practices
- Few words: the stage (“Step 02”) and a name of one or two words.
- With
size="lg"and no heading after it, passtitleAs="h2"so the section keeps its heading.
Related components
Generated from the code of @krizaka/ui 2.9.0: its meta.ts, its examples and its types.Edit this documentation on GitHub
Pointer light
The light that follows the pointer over a group of cards: one passive listener writes the pointer's position into the card it is over, the card's CSS draws the light.
Table of contents
The sections of a reading page: sticky beside the content on a wide screen, a row of chips that scrolls sideways on a phone, the section being read marked — with TocLayout to place it.