Marketing · Feature Sections

Features Grid

A grid of feature highlights with icons and text.

What's in it

• Section Heading: Everything you need to succeed
• Features Grid: 3-column grid of feature cards. (Feature 1, Feature 2, Feature 3)

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.

# Features Grid [order: 0]

- **Features Section** [x: 0, y: 0, order: 0]
  - **Prompt:** A grid of feature highlights with icons and text.
  - **Section Heading** [x: 48, y: 64, order: 0]
    - **Prompt:** Everything you need to succeed
    - **Layout Hint:** centered
  - **Features Grid** [x: 48, y: 152, order: 1]
    - **Prompt:** 3-column grid of feature cards.
    - **Feature 1** [x: 0, y: 0, order: 0]
      - **Prompt:** Feature card with icon, title and description.
    - **Feature 2** [x: 376, y: 0, order: 1]
      - **Prompt:** Feature card with icon, title and description.
    - **Feature 3** [x: 752, y: 0, order: 2]
      - **Prompt:** Feature card with icon, title and description.

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 Features Grid 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