Overline

Small uppercase label text with optional description. Used as an eyebrow or category label above content.

Also known as: eyebrow, kicker, category label, small caps label

View in Storybook

When to use

• Displaying a category or section label above headings or content.
• Showing metadata like "Daily Mix" with a subtitle "12 Tracks".
• Adding hierarchical context to card or section headers.

Import

import { Overline } from '@vacano/ui'

Usage

<Overline>Category</Overline>

With description

<Overline description="12 Tracks">Daily Mix</Overline>

With heading

Common pattern: Overline + Heading for structured content headers.

<Overline description="12 Tracks">Daily Mix</Overline>
<Heading level={3}>Frontend Radio</Heading>

Props

Prop	Type	Default	Description
children	ReactNode	required	Uppercase label text
description	ReactNode	-	Secondary text below the label
ref	Ref<HTMLDivElement>	-	Forwarded ref
className	string	-	CSS class name for the root element
classnames	OverlineClassNames	-	Custom class names for sub-elements

ClassNames

Key	Description
label	The uppercase label text
description	The description text

Related

• Heading - Heading text component
• Card - Often used inside CardHeader