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.
Why it is here. Used by krizaka.com.
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
In short: we collect what you send us, keep it in Québec, never sell it, and delete it when you ask.
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 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub