# 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 flowId="Q5libBUKTVUpYqPkUrGJ" url="<https://app.arcade.software/share/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: 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/experience-cloud/tutorials/components/banner/with-illustration-and-buttons.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.