Ctrlk
For the complete documentation index, see llms.txt. This page is also available as Markdown.

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

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:

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

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.

PreviousHome CarouselNextMenu

Last updated