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 · ✗ to buildDesktop · ✓BetaBlocks

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 only — React, from @krizaka/ui/margin-layout. Beta: its API may still change in a minor version.

Mobile · ✗ to build. 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

Why it is here. Yomizaka (krizaka/yomizaka#314) for its report and check flow, then any product that reads numbered findings.

When to use

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.

When not to use

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

Installation

Install

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

Styles

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

Import

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

Examples

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	Default	Description
`children`required	`ReactNode`	—	The item's content.
`number`required	`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	Default	Description
`children`required	`ReactNode`	—	The `MarginItem`s, in reading order.

Accessibility

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).

Keyboard

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

Best practices

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.

Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub