Page and layout

Section

A titled block of a page, with its count and one quiet note.

openvibe-shared/kitJSON

Build it

kit.section({ title: 'Members', count: 12, note: 'Who can do what', body: kit.list([kit.row({ mark: kit.mark({ name: 'Ana Lima' }), title: 'Ana Lima', sub: 'Owner' })], { flush: true }) })

Props

id
any?
cls
string?
body
string?
icon
string?
note
string?
count
any?
title
string?
actions
list?

Anatomy

  • panelbackground color.bg.raised; line color.line.base; radius radius.md
  • titlecolor color.text.muted; size type.size.caption; weight type.weight.heavy
  • notecolor color.text.muted; size type.size.meta

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
its title
Target
At least 44 × 44 px on touch
Focus
none of its own

States

  • default

Tokens

  • color.bg.raised
  • color.line.base
  • radius.md
  • color.text.muted
  • type.size.caption
  • type.weight.heavy
  • type.size.meta

Android · Jetpack Compose

Surface

@Composable fun OvSection(title: String, note: String? = null, content: @Composable ColumnScope.() -> Unit) { Surface(shape = RoundedCornerShape(OvScale.RadiusMd), border = BorderStroke(1.dp, MaterialTheme.colorScheme.outlineVariant)) { Column(Modifier.padding(vertical = OvScale.SpaceMd)) { Text(title.uppercase(), Modifier.padding(horizontal = OvScale.SpaceMd).semantics { heading() }, fontSize = OvScale.TypeSizeCaption, fontWeight = FontWeight.ExtraBold, color = MaterialTheme.colorScheme.onSurfaceVariant) if (note != null) Text(note, Modifier.padding(horizontal = OvScale.SpaceMd), fontSize = OvScale.TypeSizeMeta, color = MaterialTheme.colorScheme.onSurfaceVariant) content() } } }

iOS · SwiftUI

struct OvSection<Content: View>: View { let title: String var note: String? = nil @ViewBuilder var content: () -> Content var body: some View { GroupBox { VStack(alignment: .leading) { content() } } label: { VStack(alignment: .leading) { Text(title.uppercased()).font(.system(size: OvScale.typeSizeCaption, weight: .heavy)); if let note { Text(note).font(.system(size: OvScale.typeSizeMeta)) } } } } }

Markup

Default

<section class="ovk-section"><h2>Members<span class="ovk-count">12</span></h2><p class="ovk-note">Who can do what</p><ul class="ovk-list ovk-list--flush"><li class="ovk-row ovk-row--static"><span class="ovk-mark" style="--ovk-hue:181" aria-hidden="true">AL</span><span class="ovk-row-main"><span class="ovk-row-top"><strong>Ana Lima</strong></span><span class="ovk-row-sub"><span>Owner</span></span></span></li></ul></section>