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.
Web only — React, from @krizaka/ui/legal-page. Beta: its API may still change in a minor version.
When to use
- Privacy, terms, cookies, a licence.
- Any document read section by section.
When not to use
- For a long read with chapters.Use instead: Longform page
- For a documentation article.Use instead: Docs article page
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { LegalPage } from "@krizaka/ui/legal-page";Examples
Privacy policy
A summary and three sections with their contents.
Privacy policy
Last updated: October 2026
What we collect
Your email and your message, when you write to us.
Where it is kept
On servers in Québec, encrypted at rest.
Your rights
Ask for a copy or for deletion at any time; we answer within 30 days.
Props
A legal page: hero with the date, a plain-words summary, the sections with their contents.
| Prop | Type | Default | Description |
|---|---|---|---|
sectionsrequired | readonly LegalSection[] | — | The sections. |
titlerequired | ReactNode | — | The page's h1 (Privacy policy). |
tocLabelrequired | string | — | The contents' label (On this page). |
back | { href: string; label: string; } | — | The way back. |
linkAs | LinkComponent | — | The app's link component (Next's Link). |
summary | ReactNode | — | The short version, in plain words, before the sections. |
updated | ReactNode | — | In force since (Last updated: October 2026). |
Accessibility
- Sections are named by their
h2; the contents a namednav. - The summary is plain text, read first.
Best practices
- Open with the short version in plain words.
- Date the document; keep each section to one subject.
- 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
Landing page
A landing page: the promise beside the product alive in a window, a band of proofs, the features as a bento where the main one takes the room, the closing call.
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.