Lists and content

List

Rows under a title, with a link to all of them.

openvibe-shared/kitJSON

Build it

kit.list([kit.row({ href: '/r/night-owls', mark: kit.mark({ name: 'Night owls' }), title: 'Night owls', sub: 'ana: anyone up for the surf race?', meta: '14:05', unread: 2 }), kit.row({ href: '/r/robots', mark: kit.mark({ name: 'Robot arms' }), title: 'Robot arms', sub: 'kai sent a clip', meta: 'Yesterday' })], { title: 'Your rooms', more: { href: '/rooms', label: 'All' } })

Props

more
any?
rows
list?
empty
string?
flush
boolean?
title
string?

Anatomy

  • headuppercase, with its link; color color.text.muted; size type.size.caption; weight type.weight.heavy
  • panelbackground color.bg.raised; line color.line.base; radius radius.md

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 heading
Target
rows 56 px
Focus
Tab row to row

States

  • default
  • empty
  • loading

Tokens

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

Android · Jetpack Compose

Column

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

iOS · SwiftUI

struct OvList<Content: View>: View { var title: String? = nil @ViewBuilder var content: () -> Content var body: some View { Section { content() } header: { if let title { Text(title).font(.system(size: OvScale.typeSizeCaption, weight: .heavy)) } } } }

Markup

Default

<div class="ovk-list-head"><h2>Your rooms</h2><a href="/rooms">All</a></div><ul class="ovk-list"><li class="ovk-row ovk-row--unread"><a href="/r/night-owls"><span class="ovk-mark" style="--ovk-hue:151" aria-hidden="true">NO</span><span class="ovk-row-main"><span class="ovk-row-top"><strong>Night owls</strong><span class="ovk-row-meta">14:05</span></span><span class="ovk-row-sub"><span>ana: anyone up for the surf race?</span><span class="ovk-dot" aria-label="2 new">2</span></span></span></a></li><li class="ovk-row"><a href="/r/robots"><span class="ovk-mark" style="--ovk-hue:85" aria-hidden="true">RA</span><span class="ovk-row-main"><span class="ovk-row-top"><strong>Robot arms</strong><span class="ovk-row-meta">Yesterday</span></span><span class="ovk-row-sub"><span>kai sent a clip</span></span></span></a></li></ul>