Interactive Banner
Interactive banners use dynamic elements like animations and clickable features to capture attention and encourage actions, enhancing the user experience with flexible content presentation.
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
<dda-home-banner autoplay="true" interval="3000">
<slide>Slide 1</slide>
<slide>Slide 2</slide>
<slide>Slide 3</slide>
</dda-home-banner>What’s Inside a <Slide>
Each <slide> tag can contain custom HTML content, allowing entities to define:
Background images (
<img>)Headings and descriptions (
<h1>,<p>)Layouts using flexbox (
d-flex,gap-*)Custom buttons via
<dda-button>
Flexible Design for Different Entities
DDA only provides the container component (<dda-home-banner>), not fixed content.
This means:
Each entity is responsible for designing its own banner content inside the
<slide>.The structure, layout, text, and interactive elements can be fully customized to match individual branding or campaign needs.
Example:
<slide>
<img src="assets/img/home-banner.jpg" alt="banner" />
<div class="dda-slide-contant-wrap">
<div class="dda-slide-contant">
<div class="dda-col-sm-6">
<div class="d-flex flex-column gap-4">
<div class="d-flex flex-column gap-2">
<h1 class="h2 text-white">Book A Video Call Appointment</h1>
<p class="body">
Pioneering and accelerating the pace of digital transformation
in the city
</p>
</div>
<div class="d-flex gap-4">
<dda-button button_color="default-primary" start_icon="" end_icon="" custom_class=""
component_mode="" button_id="button" aria_label="button" onclick="alert('clicked')"
size="lg" gap="2" button_text="Book Now">
</dda-button>
<dda-button button_color="default-secondary" start_icon="" end_icon=""
custom_class="cta-transparent" component_mode="" button_id="button"
aria_label="button" onclick="alert('clicked')" size="lg" gap="2" button_text="Secondary button" >
</dda-button>
</div>
</div>
</div>
</div>
</div>
</slide>
<slide>
<video muted playsinline loop>
<source src="https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4" type="video/mp4">
</video>
<div class="dda-slide-contant-wrap">
<div class="dda-slide-contant">
<div class="dda-col-sm-6">
<div class="d-flex flex-column gap-4">
<div class="d-flex flex-column gap-2">
<h1 class="h2 text-white">Book A Video Call Appointment</h1>
<p class="body">
Pioneering and accelerating the pace of digital transformation
in the city
</p>
</div>
<div class="d-flex gap-4">
<dda-button button_color="default-primary" start_icon="" end_icon="" custom_class=""
component_mode="" button_id="button" aria_label="button" onclick="alert('clicked')"
size="lg" gap="2" button_text="Book Now">
</dda-button>
<dda-button button_color="default-secondary" start_icon="" end_icon=""
custom_class="cta-transparent" component_mode="" button_id="button"
aria_label="button" onclick="alert('clicked')" size="lg" gap="2" button_text="Secondary button" >
</dda-button>
</div>
</div>
</div>
</div>
</div>
</slide>
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: Section 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
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.
Last updated