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 uniquement — React, depuis @krizaka/ui/longform-page. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- A company's story, a case study, an essay.
- Any text read from the top, chapter by chapter.
Quand ne pas l’utiliser
- For a documentation article.À la place : Docs article page
- For a policy.À la place : Legal page
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { LongformPage } from "@krizaka/ui/longform-page";Exemples
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 | Défaut | Description |
|---|---|---|---|
chaptersrequis | readonly LongformChapter[] | — | The chapters, in order. |
titlerequis | 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). |
Accessibilité
- Each chapter is a
sectionnamed by itsh2; the numbers are decorative. - The pull quote repeats the text: it adds nothing a reader would miss.
Bonnes pratiques
- 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).
Composants liés
Générée depuis le code de @krizaka/ui 2.10.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur 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.