Marketing · Hero Sections

Minimal Editorial Hero

A typography-led hero with sparse copy and a single focused call-to-action.

What's in it

Kicker: Small uppercase kicker introducing the topic.
Editorial Headline: Large editorial-style statement with strong rhythm.
Supporting Line: Concise line that clarifies what the product does.
Single CTA: Single, high-clarity call to action.

The brief your agent gets

This is how the section appears in a UIPrompt brief: each component with its prompt, position and role, so your agent builds the section as planned instead of guessing. In a project, the brief also carries your exact copy, your brand and your stack.

# Minimal Editorial Hero [order: 0]

- **Minimal Editorial Hero** [x: 0, y: 0, order: 0]
  - **Prompt:** A typography-led hero with sparse copy and a single focused call-to-action.
  - **Kicker** [x: 48, y: 64, order: 0]
    - **Prompt:** Small uppercase kicker introducing the topic.
  - **Editorial Headline** [x: 48, y: 120, order: 1]
    - **Prompt:** Large editorial-style statement with strong rhythm.
    - **Visual Weight:** HERO — dominant focal point — largest type, most space, maximum contrast
    - **Typography Spec:** 72px / 800 / tracking-tight / line-height 0.96
  - **Supporting Line** [x: 48, y: 256, order: 2]
    - **Prompt:** Concise line that clarifies what the product does.
    - **Visual Weight:** SECONDARY — supporting detail — reduced size, weight, or contrast relative to primary
  - **Single CTA** [x: 48, y: 336, order: 3]
    - **Type:** primary
    - **Prompt:** Single, high-clarity call to action.

Get the prompt for your stack

The same section written for a specific stack, with each component mapped to its framework and component library.

Next.js + Tailwind CSS + shadcn/ui React + Tailwind CSS Vue 3 + Tailwind CSS SvelteKit + Tailwind CSS Astro + Tailwind CSS Next.js + Material UI

Use it in three steps

Open the editor and drag Minimal Editorial Hero from the section library onto a page. It lines up with the other sections on a 12-column grid.
Double-click a component to add your own copy. Your agent uses it word for word.
Your agent builds the page from the brief, over the UIPrompt connector or from a pull request to your repo. It works with Claude Code, Codex, Cursor, GitHub Copilot, Windsurf and Gemini CLI.

More sections