Margin layout

Numbered items with margin notes for product reading pages: the number in the left margin in tabular display figures, the note (the article cited, « See in the document ») in the right margin from 64 rem and under the item below it.

Web · ✓Mobile · ✗ à construireBureau · ✓BêtaBlocs

import { MarginLayout, MarginItem } from "@krizaka/ui/margin-layout";

The deposit is two months of rent, which is above the legal limit.
Clause 4.2, page 3
The notice period for ending the lease is not stated.
Clause 9, page 6
The tenant's signature is missing on the last page.
Signature page

Web uniquement — React, depuis @krizaka/ui/margin-layout. Bêta : son API peut encore changer à une version mineure.

Mobile · ✗ à construire. A phone is always the folded layout (the note under the item); the apps compose it from a numbered List until a screen asks for a twin. issue #645

Pourquoi il est là. Yomizaka (krizaka/yomizaka#314) for its report and check flow, then any product that reads numbered findings.

Quand l’utiliser

A report or a check flow read from top to bottom, where each numbered point has a source to show beside it (a finding and its clause).
Step flows whose steps carry a short note that must not interrupt the text.

Quand ne pas l’utiliser

A sentence-long footnote on a Cahier page.À la place : Footnote & caption
A label and a value, many times.À la place : Description list
Independent entry points.À la place : Card grid

Installation

Installer

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { MarginLayout, MarginItem } from "@krizaka/ui/margin-layout";

Exemples

Findings with their sources

Three numbered findings of a lease check, each with the clause it cites in the margin.

The deposit is two months of rent, which is above the legal limit.
Clause 4.2, page 3
The notice period for ending the lease is not stated.
Clause 9, page 6
The tenant's signature is missing on the last page.
Signature page

A step flow

Numbered steps, one with a note and one without.

Add the documents to check.
Takes about two minutes.
Choose what to compare them with.
Read the report and decide.
You can change the result before you sign.

Props

MarginItem

One item: its number, its content and, optionally, its margin note.

Prop	Type	Défaut	Description
`children`requis	`ReactNode`	—	The item's content.
`number`requis	`ReactNode`	—	The number shown in the left margin (« 1 », « 02 »). Decorative: the list already announces the position.
`note`	`ReactNode`	—	The note shown in the right margin from 64 rem, and under the item below it (the article cited, « See in the document »).

MarginLayout

The list of numbered items.

Prop	Type	Défaut	Description
`children`requis	`ReactNode`	—	The `MarginItem`s, in reading order.

Accessibilité

An ordered list: the position of each item is announced by the list, so the visible number is hidden from assistive tech to avoid saying it twice.
The reading order is the number, the text, then the note, whichever margin the note is drawn in.
The accent figure is large text (≥ 3:1); the note uses the secondary text role (≥ 4.5:1).

Clavier

Touches	Action
`Tab`	Reaches whatever interactive content the items hold; the layout adds no stop.

Bonnes pratiques

Keep a note to one or two lines: it sits beside the text on a desktop and under it on a phone.
Number in reading order (1, 2, 3); the figures are tabular so a column of them lines up.
Pass the words from your messages; the package ships none.
Put the page's heading outside the list: the list holds only the items.

Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub