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.
Why it is here. krizaka.com migrating its pages to the specialised template (TPL): /story.
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.
Case study
A customer's situation, what changed and the figures that prove it, in chapters.
Case study · Notary
Eleven leases a day, none of them leaving the office
A four-person firm in Laval summarises contracts with its own AI, on its own server.
Before
Each lease was read twice by hand. Pasting it into a public chatbot was faster, and not an option.
What changed
Orazaka runs on a Mac mini in the back room. A pack reads the lease and drafts the summary; the notary signs it.
Nothing is sent outside the building, and every request is logged for the audit.
Per lease
2 min
was 20 min
Sent outside
0
all answered locally
Hours a week
14
given back
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 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub