# Hero
A big, prominent section for the top of a page. Includes a title, description, up to four call-to-action buttons, an optional image (inline or background), and configurable padding.
Use Hero to create visual impact on landing pages, welcome screens, and public-facing portals.
## Available in
* Page modules
* Order Form modules
* Dashboard modules
* Public Page modules
Hero isn't available in Catalog, Modal, Reports, or Navigation modules.
## When to use
* A welcome banner at the top of a Dashboard.
* A landing-page hero on a public-facing portal (B2C, partner portal).
* A campaign or promotional banner with a clear call-to-action button.
* The first thing on a page when you want visual emphasis over information density.
For sectional headings within a page, use **Heading** (smaller, less visual weight).
## Settings
| Setting | Description |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Title** | The hero's main heading text. Default: *Hero*. |
| **Description** | The supporting text below the title. |
| **Align** | Left or Center. Default: Left. |
| **Padding** | Top and bottom padding. Default: 64px. |
| **Image** | Optional image with two settings: **URL** and **Mode** (Inline — image sits next to the text; Background — image fills the hero behind the text). |
| **Buttons** | An array of 1–4 call-to-action buttons. Each has a **Label**, **Href**, and **Variant** (primary or secondary). |
| **Quote** *(advanced)* | Optional pre-built quote that fills Title and Description automatically. |
## How it works
Hero renders as a large, padded section with the configured title, description, and buttons.
When **Align=Center** the image field is hidden — centered heroes don't pair well with side images.
The **Quote** option is a built-in shortcut: pick a quote from the dropdown and it fills the Title and Description for you (read-only while a quote is selected).
{% hint style="info" %}
Hero can't be placed inside a Grid or Flex container — it's designed for full-width prominence and ignores cell-based layouts.
{% endhint %}
## Examples
**Dashboard welcome.** Hero with Title *Welcome back, {{user.firstName}}*, Description summary of today's stats, one button *Go to Reports*, padding 48px.
**Promotional banner.** Hero with a sale message, two buttons (*Shop now* primary, *Learn more* secondary), Image with mode=Background.
**Landing page.** Hero at the top of a public B2C catalog with brand title, marketing description, and a *Browse Catalog* button.
## Related
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.in8sync.com/client-admin-guide/active-workflows/getting-started/content-components/hero.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.