Page

The whole shape of an app page in one call; the side column sits beside the content from 1024 px, under it below.

openvibe-shared/kitJSON

Build it

kit.page({ id: 'kit-demo-page', head: kit.head({ title: 'Night owls', sub: '38 here', level: 2, sticky: false }), body: kit.list([kit.row({ mark: kit.mark({ name: 'ana' }), title: 'ana', sub: 'anyone up for the surf race?', meta: '14:05' })], { flush: true }), side: kit.stats([[38, 'here now'], [412, 'members']]) })

Props

id: string?
body: string?
dock: string?
head: string?
side: string?
wide: boolean?

Anatomy

pageThe whole shape of an app page in one call; the side column sits beside the content from 1024 px, under it below.

Behaviour and access

Keyboard: Standard focus order
Outside tap: Leaves it open
Scroll: The page still scrolls
Reduced motion: Remove movement; keep the state change.
Name: Page
Target: At least 44 × 44 px on touch
Focus: Visible keyboard focus; follow reading order

States

default

Tokens

color.text.primary
size.tap

Android · Jetpack Compose

Material 3 Page

Use Page in Jetpack Compose with the shared tokens.

iOS · SwiftUI

Use Page in SwiftUI with the shared tokens.

Markup

Default

<main class="ovk-page" id="kit-demo-page"><header class="ovk-head ovk-head--static"><div class="ovk-head-row"><div class="ovk-head-id"><h2>Night owls</h2><p class="ovk-sub">38 here</p></div></div></header><div class="ovk-split"><div class="ovk-main"><ul class="ovk-list ovk-list--flush"><li class="ovk-row ovk-row--static"><span class="ovk-mark" style="--ovk-hue:244" aria-hidden="true">AN</span><span class="ovk-row-main"><span class="ovk-row-top"><strong>ana</strong><span class="ovk-row-meta">14:05</span></span><span class="ovk-row-sub"><span>anyone up for the surf race?</span></span></span></li></ul></div><aside class="ovk-side"><dl class="ovk-stats" aria-label="In numbers" tabindex="0"><div><dt>here now</dt><dd>38</dd></div><div><dt>members</dt><dd>412</dd></div></dl></aside></div></main>