HAUSE

Hero

The room's first wall: kicker, headline, dek.

MEET THE FORM ↓
01 / THE ENCOUNTERA STATEMENT — THE READER READS

A STUDY IN HERO

The first wall changes everything.

Before a visitor reads the argument, they need to know which room they have entered.

ROOM I / THE EXHIBITION

Give one idea the room.

A page can do more than hold information. It can direct attention.

A room label, one dominant headline, then a way into the subject. Arrival has a hierarchy.

02 / THE DECISION

An act.
Not a container.

YOU ARE SAYING SOMETHING

Opening the room and saying which room it is.

Is this the first thing on the page? A second Hero is a second chapter, and probably a second URL.

EXPLORE THE SELECTION GRAMMAR ↗

What is the Hero form in HAUSE, and when do you use it?

The Hero form is a HAUSE statement — the room's first wall: kicker, headline, dek. Kicker, headline, dek: where the chapter says what room you have walked into before it says anything else. The kicker names the room in evidence voice the way a museum labels one; the headline is editorial at the largest size the system has, because the claim carries the room; the dek walks beside the reader in system voice.

THE LIBRARY’S OWN ACCOUNT

Behind the form.

components/forms/Hero.tsx

Kicker, headline, dek: where the chapter says what room you have walked into before it says anything else. The kicker names the room in evidence voice the way a museum labels one; the headline is editorial at the largest size the system has, because the claim carries the room; the dek walks beside the reader in system voice.

It takes all twelve columns and appears once per page. A second Hero is a second chapter, and should be a second URL.

A statement: the reader reads.

THE STATEMENT’S DISCIPLINE

Every statement is prose in the three voices — editorial for claims, system for explanation, evidence for measurement. Server-renderable, no interaction: the reader reads, and nothing about the form depends on JavaScript arriving.

03 / MAKE SOMETHINGINSTALL HAUSE ↗

Give it your subject.

The Hero above is the real library component. Its props below come directly from the source.

REACT · Hero

import { Hero } from "@chrishayuk/hause/components/forms/Hero";

export function Hero({ kicker, title, dek }: { kicker: string; title: string; dek: string })

The import and the complete props contract. For installation and composition, follow the Build guide.

NOT INVENTED IN ISOLATION

A page needed this.

Used in vindex3.org and hause.design. These exhibitions share an author; this is evidence of reuse, not independent adoption.

PUBLISHED 31 AUG 2026 · REVISED 9 SEP 2026 · VERSION 0.1.0

CITE

source components/forms/Hero.tsx · site build 3ee5339 · built 2026-09-09

CITE THIS

Web page · 0.1.0

Hay, C. (2026). Hero — a HAUSE statement. In HAUSE — a design system for AI (Version 0.1.0). hause.design. https://hause.design/forms/hero

The specimen, the source account and the props share one form record. Cite this page or follow its source identifier to inspect the implementation.