Detail layout
One object's page: the way back, its media, name, status, facts and actions, its tabs, the content and a side panel that goes under the content on a phone.
Web only — React, from @krizaka/ui/detail-layout. Beta: its API may still change in a minor version.
When to use
- A video, a job, an account, a pack, an order.
- Any object reached from a list.
When not to use
- For a list and its item side by side.Use instead: Split view
- For a screen of figures.Use instead: Dashboard layout
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { DetailLayout } from "@krizaka/ui/detail-layout";Examples
A video
Orochia's video page: thumbnail, status, facts, tabs and the sales beside.
Video · v-2087
Night shoot, part 2
Published- 12:48
- Unlock €4.99
- 18+ checked
A job
An engine job without tabs or side panel.
Job · job-4822
Podcast transcript
RunningThe transcript appears here as it is written.
Props
One object's page: header (back, media, name, status, facts, actions), tabs, content and a side panel.
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | ReactNode | — | The object's name: the h1. |
actions | ReactNode | — | The object's actions (edit, publish, a DropdownMenu). |
aside | ReactNode | — | The side panel: details, related objects, activity (under the content on a phone). |
back | ReactNode | — | The way back to the list: your router's link (<Link href="/videos">Videos</Link>), drawn with its arrow. |
eyebrow | ReactNode | — | A mono line above the name (the object's kind, its id). |
media | ReactNode | — | A thumbnail, a cover or an avatar beside the name. |
meta | ReactNode | — | Under the name: its facts (the author, a date, a count — Facts or plain text). |
status | ReactNode | — | Beside the name: its status (a Badge). |
tabs | ReactNode | — | Under the header: the object's tabs (Tabs.List of
@krizaka /ui/tabs, inside your Tabs.Root around the layout). |
Accessibility
- The name is the page's
h1. - The side panel is an
aside; on a phone it comes after the content in reading order.
Best practices
- The status beside the name, in words (a Badge), not only a colour.
- Two or three actions at most in the header; the rest in a DropdownMenu.
- Put the tabs'
Tabs.Rootaround the layout so the content follows the tab.
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
Dashboard layout
A dashboard: the screen's heading with its actions and filters, then a responsive grid of widgets — one column on a phone, two from sm, four from xl — each a titled region that spans one to four columns.
Docs layout
A documentation page in the site's frame: the pages, the article and its contents on a wide screen; on a phone the pages fold into a disclosure above the article.