# Interactive Banner
## Overview
## Usage
### When to use this component?
Interactive banners are ideal for grabbing user attention and promoting key actions or content. They are commonly used to showcase announcements, campaigns, or featured content in a visually engaging and interactive manner.
### How it works
Interactive banners combine dynamic elements such as animations, videos, clickable features, carousel indicators, and multifunctional cards. These components work together to present information flexibly, encourage user interaction, and drive engagement, ensuring an enhanced and immersive user experience.
### Code
{% tabs %}
{% tab title="Vanilla Js" %}
```jsx
Slide 1
Slide 2
Slide 3
```
{% endtab %}
{% tab title="React" %}
```jsx
Slide 1
Slide 2
Slide 3
```
{% endtab %}
{% tab title="Vue" %}
```jsx
Slide 1
Slide 2
Slide 3
```
{% endtab %}
{% tab title="Angular" %}
```jsx
Slide 1
Slide 2
Slide 3
```
{% endtab %}
{% endtabs %}
### What’s Inside a \
Each `` tag can contain **custom HTML content**, allowing entities to define:
* Background images (``)
* Headings and descriptions (`
`, `
`)
* Layouts using flexbox (`d-flex`, `gap-*`)
* Custom buttons via ``
#### Flexible Design for Different Entities
DDA **only provides the container component (``)**, not fixed content.
This means:
* **Each entity is responsible** for designing its own banner content inside the ``.
* The structure, layout, text, and interactive elements can be fully customized to match individual branding or campaign needs.
### **Example:**
```html
Book A Video Call Appointment
Pioneering and accelerating the pace of digital transformation
in the city
Book A Video Call Appointment
Pioneering and accelerating the pace of digital transformation
in the city
```
## Anatomy
**Hero Image/Video:** A visually striking background element featuring a high-quality image or video, setting the tone and context of the banner content.
**Banner Content: S**ection containing the primary message or call-to-action text, such as "Our objective is to digitalize life in Dubai," designed to grab user attention.
**Search Field:** A prominent search bar allowing users to quickly locate services or information, enhancing functionality and usability.
**Gradient Overlay:** A subtle gradient applied over the hero image/video, improving text readability by creating contrast and a visually pleasing effect.
**Carousel Indicator:** Small dots or markers below the search field indicating the presence of additional slides or content that can be navigated through.
**Scroll Indicator:** A visual cue prompting users to scroll down for more content, encouraging exploration of the page.
***
## Dos and Don'ts
| Dos | Don'ts |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| Maintain a consistent icon style (sharp, round, filled, or outlined) across all multifunctional cards. | Don’t use inconsistent icons, such as sharp, round, filled, or outlined. |
| Ensure each card contains a minimum of one word of text. | Be aware of the padding between the multifunctional cards. |
| Display a minimum of three multifunctional cards and up to five cards, with optional options for six or seven cards featuring smaller service cards. | Limit the number of multifunctional cards to a maximum of seven; don't exceed this limit. |
| In case additional service card are needed, the last card should be labeled as "See All Services" which, when clicked, will redirect the user to a new page containing the related information. | Ensure that the transparency level of the black color is not set higher than 40% for the specified design element. |
| Ensure that the maximum text width does not exceed 232px, and it should stay within the 12px vertical padding on both sides. | The maximum text width should never exceed 232px and the 12px vertical padding on both sides. |
---
# 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://designsystem.dubai.ae/components/interactive-banner.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.
