Loading…

Hero minimal

Block

A quiet hero: a headline whose letters draw together, one line of copy and a text link.

Heroes
1 components
1 file

Less is more

Simple, elegant components that speak for themselves.

Explore components

Installation

The block is written to your blocks directory, and everything it is built from is installed alongside it.

$pnpm dlx @dowel-ui/cli add hero-minimal

Usage

A starting point, not a black box: render it, then edit the layout, the copy and the fields — they are yours.

app/page.tsxTSX

import { HeroMinimalBlock } from "@/components/blocks/hero-minimal"; export default function Page() {  return <HeroMinimalBlock />;}

Built from

Every piece is a component you already have documentation for, and can change independently.

Button

API

<HeroMinimalBlock>

Prop	Type	Default
`action` The single text link. `null` hides it.	`HeroMinimalAction \| null`	`{ label: "Explore components", href: "#" }`
`description`	`string`	`"Simple, elegant components that speak for themselves."`
`headingLevel` The headline's level, so the block fits any page outline.	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`
`title` The headline.	`string`	`"Less is more"`

Plus every attribute of <section> except title.

Accessibility

One section landmark named by its headline, whose level is a prop. The link is a real link with a visible underline, not colour alone, and its arrow mirrors in right-to-left text. The fade and letter-spacing entrance play once, on first scroll into view, and settle instantly under reduced motion.