Marketing · Hero Sections

Hero Section

A dominant hero section with a bold headline, supporting subtext, and clear call-to-action buttons.

What's in it

• Headline: Main catchy headline for the hero section.
• Subheadline: A short descriptive paragraph supporting the main headline.
• Actions: Primary and secondary CTA buttons. (Primary Button, Secondary Button)
• Hero Image: Placeholder for a prominent hero illustration or screenshot.

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.

# Hero Section [order: 0]

- **Hero Section** [x: 0, y: 0, order: 0]
  - **Prompt:** A dominant hero section with a bold headline, supporting subtext, and clear call-to-action buttons.
  - **Headline** [x: 48, y: 64, order: 0]
    - **Prompt:** Main catchy headline for the hero section.
    - **Visual Weight:** HERO — dominant focal point — largest type, most space, maximum contrast
    - **Typography Spec:** 64px / 800 / tracking-tight
  - **Subheadline** [x: 48, y: 200, order: 1]
    - **Prompt:** A short descriptive paragraph supporting the main headline.
    - **Visual Weight:** SECONDARY — supporting detail — reduced size, weight, or contrast relative to primary
  - **Actions** [x: 48, y: 280, order: 2]
    - **Prompt:** Primary and secondary CTA buttons.
    - **Primary Button** [x: 0, y: 0, order: 0]
      - **Type:** primary
      - **Prompt:** Main call to action.
    - **Secondary Button** [x: 184, y: 0, order: 1]
      - **Type:** secondary
      - **Prompt:** Secondary action.
  - **Hero Image** [x: 706, y: 64, order: 3]
    - **Prompt:** Placeholder for a prominent hero illustration or screenshot.

Get the prompt for your stack

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

Use it in three steps

1. Open the editor and drag Hero Section from the section library onto a page. It lines up with the other sections on a 12-column grid.
2. Double-click a component to add your own copy. Your agent uses it word for word.
3. 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

See all 23 sections