Page hero
The first screen of a page: the way back, an eyebrow, the h1, a lead, what follows them (facts, actions) and an aside (the page's bird) — on the brand's backdrop, painted at once.
Web only — React, from @krizaka/ui/page-hero. Beta: its API may still change in a minor version.
When to use
- At the top of every page of a site that is not the home: a product's sub-page, a building block, a hub, contact.
- When the page belongs to a parent (
back): the reader always knows where they are and how to go up.
When not to use
- At the top of an app's screen: a working view needs a calm header.Use instead: Page header
- For a section further down the page.Use instead: Page
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { PageHero } from "@krizaka/ui/page-hero";Examples
A sub-page
Back link, eyebrow, title, lead, facts under it and the page's bird beside it.
Building block · Java
Krizaka Java
The Spring Boot foundation every Krizaka service starts from: one parent, one BOM, starters that agree.
- Maven Central 0.1.0
- Java 21
- Apache-2.0
A hub
align="center" on the plain backdrop: a title alone.
Documentation
Build with Krizaka
The building blocks the products are made of, documented from their source.
Props
The first screen of a page: back link, eyebrow, h1, lead, what follows them (facts, actions) and an aside.
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | ReactNode | — | The page's title: the h1. |
align | "center" | "start" | start | center for a page that opens on its title alone (a hub, a contact page). |
aside | ReactNode | — | Beside the text, on the right (above it on a phone): the page's bird, an illustration. Decorative or labelled by you. |
back | { href: string; label: string; } | — | The way back to the parent page, above the eyebrow. |
backdrop | "none" | "grid" | "plain" | grid | The brand's backdrop behind the hero (the gradient, the dome; grid adds the perspective floor). |
eyebrow | ReactNode | — | A short mono line above the title (where the reader is: Open source · building block). |
lead | ReactNode | — | One or two sentences under the title: what the page gives the reader. |
linkAs | LinkComponent | — | The app's link component for internal addresses (Next's Link); an <a> otherwise. |
size | PageSize | default | The width of the content. |
Accessibility
- Renders the page's
h1inside aheader; keep one hero per page. - The backdrop's layers are decorative and hidden from assistive technology; the aside is yours to label or hide.
- The back link is a plain link with its words; its arrow is decorative.
Best practices
- One sentence of lead: what the page gives the reader, not what it is.
- The eyebrow says where the reader is (
Open source · building block); the title says the subject. - Never reveal it: it is the page's largest paint. Put the bird in
aside, facts or actions in the children. - Set
--kz-hero-toponce to clear a fixed navigation bar.
Related components
Generated from the code of @krizaka/ui 2.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub
Page
The frame of every page: one width (--kz-page-max), one pair of gutters, one vertical rhythm — Page, Section (full-bleed, its heading, a hairline or the brand's backdrop as transition) and SectionHeading, with Facts and Ticks.
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.