Skip to content

Neo-BrutalMotion

Section Header

Title block for a section: the eyebrow led by the volt kicker square ("01 — Product": the index in bold ink, an em dash, the eyebrow), the heading (type-display text-display-lg, h2 by default), lead text and actions. split is the kit's usual head: eyebrow across, title on columns 1–7, text and actions on 8–12, bottom-aligned (stacked under lg).

Live, interactive React component · light themeResponsive

About the Neo-Brutal Section Header

Title block for a section: the eyebrow led by the volt kicker square ("01 — Product": the index in bold ink, an em dash, the eyebrow), the heading (type-display text-display-lg, h2 by default), lead text and actions. split is the kit's usual head: eyebrow across, title on columns 1–7, text and actions on 8–12, bottom-aligned (stacked under lg). Its children reveal up in order. Eyebrow is the kicker label on its own.

It is part of Neo-Brutal. The style’s 92 pieces share one set of tokens, type and motion, in a light and a dark theme, so whatever you take from it fits together.

To put it in your project, copy the prompt into Claude Code, OpenAI Codex or Cursor, or add the file and its styles by hand. The documentation walks through both.

The same piece, drawn for a different look. Open one to compare it live.

Noir Aurora Section Header

Title block for a section: the eyebrow in mono capitals with the index in a small lit box ("01"), the heading in type-display text-display-lg ink-silver (it arrives out of a blur), lead text and actions, aligned start, center or split (on the 12-column grid: title over 8 columns, text from column 9 at the bottom, from lg; stacked below).

Soft Bento Section Header

Title block for a section: index and eyebrow, heading (type-display text-display-lg), lead text and actions, aligned start, center or split (title left, text right from lg; stacked below).

Swiss Tech Mono Section Header

Title block for a section: the ruled index row ("01 / Product", a hairline that draws in, a mono coord at its right end and "+" crosses at both ends), the heading (type-display text-display-lg), lead text and actions. split is the kit's usual head: title on 7 columns, text from column 9 (stacked under lg); center breaks the pattern.