Product roadmap
A short lead paragraph sets up the page in a calmer, larger type size before the body copy begins.
A
Acme Inc⌄
html<nav class="nk-tab-bar fixed">…</nav><div class="nk-tab-bar-spacer"></div>
```
- **Classes:** `.nk-tab-bar`, `.nk-tab-bar-item`, `.nk-tab-bar-spacer`, `.icon`, `.label`, `.active`, `.always`, `.fixed`, `.floating`
- **On a small screen:** Visible only below 860px – above, the sidebar takes over and the bar is `display: none`. `always` shows it at every width, as in this preview. On phones with a home indicator the bottom padding is the larger of 6px and `env(safe-area-inset-bottom)`, so the labels end where iOS ends its own tab bar; in landscape the side padding grows to the left/right insets (Dynamic Island) while the background still runs edge to edge.
### Breadcrumb — `.nk-breadcrumb`
Each step is a `.crumb`; the last one carries `.current` and turns from secondary to primary text. Separators are `.sep`.
```html
```
- **Classes:** `.nk-breadcrumb`, `.crumb`, `.sep`, `.current`
- **On a small screen:** Wraps rather than truncating. Shorten the trail server-side on small screens.
### Section label — `.nk-section-label`
The small uppercase caption between sidebar groups. Its `.plus` affordance only appears on hover — a quiet way to keep an add action reachable without decorating the rail.
```html
Favourites＋
📊Project overview
📊Project overview＋⋯
📚Knowledge base＋⋯
🎨Design system＋⋯
▶📚Knowledge base
📄Meeting notes
🎨Design system
▶🗂️Pages
—
🔍Search⌘K
Product roadmap
A short lead paragraph sets up the page in a calmer, larger type size before the body copy begins.
- `, `
- ` and `
- ` it is a description list for assistive technology as well; plain ``s work the same. A value that is text – a sentence, an address, a model name with a tag – takes `.text` and flows as text instead of setting its parts one under the other. The value keeps at least 220px: in a column narrower than 380px, a side panel say, it moves under its name. `.flush` drops the outer margin, for a list inside a panel or a flex column with a gap of its own. ```html
- Status
- In progress
- Owner
- ALAda Lovelace
- Due
- 2 June 2026
- Address
- support+design@notionkit.example.com · Verified
- Tags
- Design systemCSS
- Progress
- 65 %
` inside: it fills the band and is cropped, never stretched, and `object-position` moves the crop, as Notion's “Reposition” does. The gradient stays underneath while it loads. ```html
``` - **Classes:** `.nk-cover` - **On a small screen:** Full bleed, as tall as `--nk-cover-height`; lower the token if the band eats too much of a short screen. Without a page icon the page keeps its top padding under the cover. ### Headings & lead — `.nk-heading` `nk-heading` is the in-document section heading — a flex row, so an emoji sits on the baseline without extra markup. `p.lead` is the larger intro paragraph inside `nk-page`. ```html
``` - **Classes:** `.nk-heading`, `.lead` - **On a small screen:** Unchanged. The page title stays 40px; override it if that is too loud on a phone. ## Content elements (PRD 5.4) ### Callout — `.nk-callout` A tinted block for the one thought that must not be missed. The icon is a `.c-icon` child and has a `::slotted()` twin, so `✅ How this works
A short lead paragraph sets up the page in a calmer, larger type size before the body copy begins.
` can accept it through a slot. ```html ``` - **Classes:** `.nk-callout`, `.c-icon` - **On a small screen:** Flows naturally; the icon stays on the first line because the row is `align-items: flex-start`. ### Bookmark — `.nk-bookmark` Notion's link block: `.bm-title`, two lines of `.bm-desc` and the `.bm-url` with its `.bm-favicon` on the left, the preview image in `.bm-cover` on the right – a third of the box, 240px at most, so a 1200×630 `og:image` fits nearly whole. The whole box is the link, an ``; fill it from the page's `og:title`, `og:description` and `og:image`. Without an image the text takes the width, without a description the box gets lower. Also the way to show how a shared link will look. ```html NotionKit – the calm workspace look as CSS NotionKit is a pure CSS component library in the Notion idiom: sidebar, page tree, document shell, database views, settings and AI surfaces.Core idea: a callout carries one thought that should not be missed. Keep it to a sentence or two.
https://notionkit.jungherz.com
```
- **Classes:** `.nk-bookmark`, `.bm-text`, `.bm-title`, `.bm-desc`, `.bm-url`, `.bm-favicon`, `.bm-cover`
- **On a small screen:** The image keeps its third and is cropped at the centre; title and address end in an ellipsis, the description in two lines.
### To-do — `.nk-todo`
A checkbox with a custom checkmark. The sibling selector `input:checked + span` strikes the label through — both halves live inside one component, so it survives the move into a shadow root.
```html
``` - **Classes:** `.nk-todo` - **On a small screen:** The 16px box is below the touch minimum. Wrap it in a `