Tools

Tool head

What the tool does, in its colour, with the facts that matter (free, no sign-in, what is kept).

openvibe-shared/kitJSON

Build it

kit.toolHead({ icon: 'image', hue: 280, family: 'Images', crumb: { href: '/tools', label: 'Tools' }, title: 'Shrink an image', task: 'Make a picture smaller without it looking worse.', facts: ['Free', 'No sign-in', 'Nothing kept'], level: 2 })

Props

hue
any?
icon
string?
task
string?
crumb
any?
facts
list?
level
any?
title
string?
family
string?
iconHtml
any?

Anatomy

  • toolHeadWhat the tool does, in its colour, with the facts that matter (free, no sign-in, what is kept).

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
Tool head
Target
At least 44 × 44 px on touch
Focus
Visible keyboard focus; follow reading order

States

  • default

Tokens

  • color.bg.raised
  • color.text.primary

Android · Jetpack Compose

Material 3 Tool head

Use Tool head in Jetpack Compose with the shared tokens.

iOS · SwiftUI

Use Tool head in SwiftUI with the shared tokens.

Markup

Default

<header class="ovk-tool-head" style="--ovk-tint-h:280"><span class="ovk-tool-tile" aria-hidden="true"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="3" y="5" width="18" height="14" rx="3"/><circle cx="9" cy="10" r="1.6"/><path d="m21 16-5-5-8 8"/></svg></span><a class="ovk-tool-crumb" href="/tools">Tools<svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m9.9 6.6 6.6 6.6 -6.6 6.6"/></svg></a><h2 class="ovk-tool-title">Shrink an image</h2><p class="ovk-tool-task">Make a picture smaller without it looking worse.</p><ul class="ovk-tool-facts"><li>Free</li><li>No sign-in</li><li>Nothing kept</li></ul></header>