Mark
A person or a place: their picture, or up to two letters on a colour that comes from the name.
openvibe-shared/kitJSON
Build it
kit.mark({ name: 'Ana Lima' }) + kit.mark({ name: 'Night owls' }) + kit.mark({ name: 'Pike Place', square: true }) + kit.mark({ name: 'kai', size: 48 })Props
hue- any?
src- string?
name- string?
size- any?
square- boolean?
Anatomy
- markA person or a place: their picture, or up to two letters on a colour that comes from the name.
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
- Mark
- Target
- At least 44 × 44 px on touch
- Focus
- Visible keyboard focus; follow reading order
States
- default
Tokens
color.bg.raisedcolor.text.primary
Android · Jetpack Compose
Material 3 Mark
Use Mark in Jetpack Compose with the shared tokens.
iOS · SwiftUI
Use Mark in SwiftUI with the shared tokens.
Markup
Default
<span class="ovk-mark" style="--ovk-hue:181" aria-hidden="true">AL</span><span class="ovk-mark" style="--ovk-hue:151" aria-hidden="true">NO</span><span class="ovk-mark ovk-mark--square" style="--ovk-hue:130" aria-hidden="true">PP</span><span class="ovk-mark" style="--ovk-mark:48px;--ovk-hue:99" aria-hidden="true">KA</span>