# Hero Banner

***

## Changing the Properties

### Adding a title

The title lets you enter the text for the main hero content. You can adjust the title alignment by setting the content to horizontal/vertical alignment options. 

### Customizing the layout

Layout options lets you define specific height and width for the Hero Banner.

***

## Adding Interactions

No interactions are available for the Hero Banner.

***

## Styling the Hero Banner

From the Styles panel, you can customize styling attributes for the Hero Banner: 

* **`Banner`**: to customize the Banner background color if an image is present.
* **`Title`**: to customize the style for the title text.
* **`Caption`**: to customize the style for the caption text.
* **`Subtitle`**: to customize the style for the subtitle text.
* **`Primary Button`**: to customize the style of the primary button.
* **`Secondary Button`**: to customize the style of the secondary button.

You can find the instructions for styling [here](/flow/component-builder/style-panel.md).

## Examples

<figure><img src="/files/OllLdLIw1JN1d71NcxLa" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="214">Property</th><th>Value</th></tr></thead><tbody><tr><td>Title</td><td>Opportunities</td></tr><tr><td>Caption</td><td>Recently viewed</td></tr><tr><td>Image source</td><td>URL</td></tr><tr><td>Content horizontal alignment</td><td>Yes</td></tr><tr><td>Content vertical alignment</td><td>Yes</td></tr><tr><td>Style / Caption color</td><td>#e3066a</td></tr><tr><td>Style / Caption font size</td><td>16px</td></tr><tr><td>Style / Caption font weight</td><td>600 - Semi Bold</td></tr></tbody></table>

## Specifications

### Attributes

<table><thead><tr><th width="202">Name</th><th width="199.75836972343524">Type</th><th>Description</th></tr></thead><tbody><tr><td>caption</td><td>String</td><td>The caption can include text, and is displayed over the title.</td></tr><tr><td>contentHorizontalAlignment</td><td>String</td><td><p>Horizontal alignment of the title, caption and description.</p><p>Valid values include left, center and right</p></td></tr><tr><td>contentVerticalAlignment</td><td>String</td><td><p>Vertical alignment of the title, caption and description.</p><p>Valid values include top, center and bottom.</p></td></tr><tr><td>contentWidth</td><td>Integer</td><td>Width of the content inside of the banner in percentage.</td></tr><tr><td>height</td><td>Integer</td><td>Height of the banner in px.</td></tr><tr><td>maxWidth</td><td>Integer</td><td>Width inside of the banner in px.</td></tr><tr><td>primaryButtonLabel</td><td>String</td><td>The text to be displayed inside the primary button.</td></tr><tr><td>secondaryButtonLabel</td><td>String</td><td>The text to be displayed inside the secondary button.</td></tr><tr><td>backgroundSrc</td><td>String</td><td>Background image for the hero banner.</td></tr><tr><td>subtitle</td><td>String</td><td>The subtitle can include text, and is displayed under the title.</td></tr><tr><td>title</td><td>String</td><td>The title can include text, and is displayed in the banner.</td></tr></tbody></table>

### Events

| Name                 | Description                                             |
| -------------------- | ------------------------------------------------------- |
| PrimaryButtonClick   | The event is fired when the primary button is clicked.  |
| SecondaryButtonClick | The event is fired when the secondary button is clicked |

### Styling Hooks

#### Banner

| Name             | Description                                             |
| ---------------- | ------------------------------------------------------- |
| Background Color | Define a background color if no image source is present |

#### Title

| Name         | Description                          |
| ------------ | ------------------------------------ |
| Text Color   | Define a text color for the title.   |
| Font Size    | Define a font size for the title.    |
| Font Family  | Define a font family for the title.  |
| Font Weight  | Define a font weight for the title.  |
| Shadow Color | Define a shadow color for the title. |

#### Caption

| Name         | Description                            |
| ------------ | -------------------------------------- |
| Text Color   | Define a text color for the caption.   |
| Font Size    | Define a font size for the caption.    |
| Font Family  | Define a font family for the caption.  |
| Font Weight  | Define a font weight for the caption.  |
| Shadow Color | Define a shadow color for the caption. |

#### Subtitle

| Name         | Description                           |
| ------------ | ------------------------------------- |
| Text Color   | Define a text color for the subtitle. |
| Font Size    | Define a text color for the subtitle. |
| Font Family  | Define a text color for the subtitle. |
| Font Weight  | Define a text color for the subtitle. |
| Shadow Color | Define a text color for the subtitle. |

#### Primary Button

| Name                   | Description                                 |
| ---------------------- | ------------------------------------------- |
| Text Color             | Define a text color for the Primary Button. |
| Text Color Hover       | Define a text color for the Primary Button. |
| Background Color       | Define a text color for the Primary Button. |
| Background Color Hover | Define a text color for the Primary Button. |
| Border Color           | Define a text color for the Primary Button. |
| Border Radius          | Define a text color for the Primary Button. |

#### Secondary Button

| Name                   | Description                                   |
| ---------------------- | --------------------------------------------- |
| Text Color             | Define a text color for the Secondary Button. |
| Text Color Hover       | Define a text color for the Secondary Button. |
| Background Color       | Define a text color for the Secondary Button. |
| Background Color Hover | Define a text color for the Secondary Button. |
| Border Color           | Define a text color for the Secondary Button. |
| Border Radius          | Define a text color for the Secondary Button. |


---

# 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.avonnicomponents.com/flow/flow-components/hero-banner.md?ask=<question>
```

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.