Koala UI

Header

The opening of an inner page: its one H1, a lede and what to do next, at a third of a hero's height. Nine headers, from a centered title to a search field, a brand band, a photo banner and a document header.

Variant 1

Variant 2

Pro

Variant 3

Pro

Variant 4

Pro

Variant 5

Pro

Variant 6

Pro

Variant 7

Pro

Variant 8

Pro

Installation#

# One-time setup (tokens + lib helpers)npx koalaui-cli@latest init# Add this component (its dependencies come along)npx koalaui-cli@latest add section-header

Built from#

Every header is a SectionHeader at its display size with the heading set to level={1}, so the band owns the page's single H1 and every section under it keeps its H2. The eyebrow is the dot Badge (tracked small caps on the photo banner, where a badge would sit on the picture as a sticker), the actions are Buttons, the search field is InputRoot beside a detached submit, and the document header adds a Breadcrumb. Each takes its copy as props, so one header can open a pricing, careers or legal page without a fork.

Responsive#

The split headers put their actions beside the title from lg up and stack them under the lede below it, where the buttons go full width. The photo header drops its picture under the copy, and the photo strip steps its height down with the frame instead of keeping an aspect ratio, so a phone still gets a picture rather than a sliver. The photo banner does the same with a floor height, and grows past it when a long title needs the room.

FAQ#

A hero opens a landing page and has to sell: media, proof, a display headline. A header opens an inner page (pricing, blog, careers, legal) and only has to say where you are, so it is shorter and lets the content start sooner.