Longform page
A long read — a story, an essay, a case: numbered chapters in a reading column, pull quotes in the margin, figures that break out.
Web only — React, from @krizaka/ui/longform-page. Beta: its API may still change in a minor version.
When to use
- A company's story, a case study, an essay.
- Any text read from the top, chapter by chapter.
When not to use
- For a documentation article.Use instead: Docs article page
- For a policy.Use instead: Legal page
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { LongformPage } from "@krizaka/ui/longform-page";Examples
Our story
Krizaka's story in chapters, a pull quote and the flamingo's rule.
Our story
Why a studio in Montréal builds its own AI
Three products, one rule: what is yours stays yours.
It started with a lease
A notary asked a chatbot to summarise a lease. The answer was good; the lease was now on someone else's server.
We built Orazaka so that question never has to leave the office.
Then came the creators
Orochia pays creators 90 % of what their fans spend, every Monday — no algorithm in between.
Whoever does the work gets paid first.
Props
A long read: hero, then numbered chapters with pull quotes in the margin and figures that break out.
| Prop | Type | Default | Description |
|---|---|---|---|
chaptersrequired | readonly LongformChapter[] | — | The chapters, in order. |
titlerequired | ReactNode | — | The page's h1. |
aside | ReactNode | — | Beside the hero: the page's bird, an illustration. |
back | { href: string; label: string; } | — | The way back. |
brand | string | — | The brand the page wears (.brand-<id>). |
eyebrow | ReactNode | — | A mono line above the title. |
lead | ReactNode | — | The standfirst. |
linkAs | LinkComponent | — | The app's link component (Next's Link). |
Accessibility
- Each chapter is a
sectionnamed by itsh2; the numbers are decorative. - The pull quote repeats the text: it adds nothing a reader would miss.
Best practices
- Chapters of three to six paragraphs; one pull quote at most each.
- Figures carry a promise (a bird's quote, a schema), never decoration.
- Words and content arrive as props; the motion is the platform's (
[data-reveal], still under reduced motion).
Related components
Generated from the code of @krizaka/ui 2.10.0: its meta.ts, its examples and its types.Edit this documentation on GitHub
Legal page
A policy or terms: the date in force, the short version in plain words, the sections in a narrow column with their contents beside them.
Pricing page
Plans and what they cost: the plans side by side with the featured one lifted, the comparison as a table, what a credit buys, the questions people ask.