> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/tutorials/components/banner/with-illustration-and-buttons.md).

# With Illustration and Buttons

## Overview

The [Avonni Banner](/experience-cloud/experience-components/ax-banner.md) component is designed to capture user attention with compelling visual and interactive buttons.

Here's how to configure a banner with an illustration aligned to the left or right, a button that triggers a dialog to watch a video, and another button that redirects the user to a different page.

<figure><img src="/files/RjhCCpEOaDXd6X2f9cpY" alt=""><figcaption><p>Live Result</p></figcaption></figure>

## Interactive Step-by-Step Configuration Guide

{% @arcade/embed url="<https://app.arcade.software/share/Q5libBUKTVUpYqPkUrGJ>" flowId="Q5libBUKTVUpYqPkUrGJ" %}

### Adding the Banner

1. **Place the Banner Component:**
   * In the Experience Builder, drag the Avonni Banner component onto your page where you want the banner to appear.
2. **Set the Media:**
   * Find the option to add an image or illustration within the banner settings (CMS Media OR Media URL)
   * Upload or select the illustration you want to use and position it to the left or right side of the banner (using the Media Position attribute)

### Configuring Buttons

3. **Add a Button to Open a Video Modal:**
   * Drag the Avonni Layout to create a layout of 2 columns to add buttons inside each column.
   * Drag the Avonni Button Dialog component.
   * Adjust the settings of the Button (Label, Variant, Alignment)
   * Label the button appropriately, such as "Watch Video".
   * Click on the Button to open the Modal.
   * Inside the modal, drag the video player using the [Avonni Video component](/experience-cloud/experience-components/ax-video.md) (in the dialogContent zone)
   * Configure the Avonni Video component.
4. **Add a Button to Redirect to a Page:**
   * Include an additional button in the other column of the previously created Avonni Layout banner.
   * Label this button with a call-to-action, like "Learn More".
   * Configure the button's [Navigate interaction](/experience-cloud/properties-panel/interactions/navigate.md#overview) in the 'Link To' section by specifying the destination page for user redirection.

## Example Implementation

Let's say you're creating a promotional banner for a new product launch:

1. **Illustration:**
   * You add an eye-catching illustration of the new product on the left side of the banner to draw attention.
2. **Video Modal Button:**
   * The first button says "Watch Demo". It's set to open a modal dialog where a product demo video is embedded. You can use the [Avonni Button Dialog](/experience-cloud/experience-components/ax-button-dialog.md) for that.
3. **Redirect Button:**
   * The second button, "Product Details", when clicked, [navigates to a page](/experience-cloud/properties-panel/interactions/navigate.md#named-page) with more information about the product.
4. **Styling and Testing:**
   * Style the banner and buttons to match your company's branding.
   * Test both buttons to ensure one opens the video correctly and the other redirects as expected.
5. **Publish:**
   * After confirming everything works smoothly, publish your changes.

### Tips for Effectiveness

* Ensure the illustration is relevant and enhances the banner's message.
* The video should be short, engaging, and informative.
* The "Learn More" button should direct users to a page that continues the narrative from the banner.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/tutorials/components/banner/with-illustration-and-buttons.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.