Banner Cards
Banner cards use interactive and clickable features to engage users, enhancing the presentation of content effectively.
Overview

Usage
When to use this component?
Banner cards prominently display key information, special offers, or critical updates. They are particularly effective in engaging users and guiding them towards desired actions within a visually concise and interactive format.
How it works
Banner cards combine elements like clickable features and concise informational displays. These components seamlessly work together to present information in an engaging way, encourage user interaction, and drive engagement, thus enhancing the overall user experience with interactive and visually appealing content.
Code
<dda-banner-card
image_src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvhlzYedWoCSkLB2HFQ87P5gPjCmJqmTt8vw&s"
banner_card_title="Card Title"
banner_card_description="Lorem Ipsum..."
banner_card_href="javascript:void(0)"
banner_card_id="exampleId"
custom_class=""
component_mode=""
></dda-banner-card>
Properties
image_src
Path to the icon or image shown on the banner card.
string
banner_card_title
The main title or heading of the card.
string
banner_card_description
Short description or content text of the card.
string
onclick
JavaScript function triggered when the card is clicked.
string
banner_card_href
Link that the banner card redirects to when clicked.
string
banner_card_id
Unique identifier for the banner card (useful for targeting).
string
Anatomy

Icon: Positioned at the top, the icon visually signifies the theme or function of the card, making it easily recognizable at a glance.
Title: The title, located directly below the icon, succinctly communicates the main focus or service provided by the card.
Description: This brief text offers a clear explanation or summary of what the user can expect, enhancing understanding and engagement.
Banner Card Container: This container houses the title, description, and icon, organizing these elements in a designated space to enhance focus on key information within the card.
Dos and Don'ts
Use clear, legible icons that immediately convey the card's purpose or action.
Don’t use low-quality or blurry images for the image_src
—it reduces visual appeal.
Write concise, meaningful titles to ensure quick understanding.
Avoid long or vague titles that don’t communicate the card’s content.
Keep descriptions short and relevant to avoid overwhelming users.
Don’t overload the description with too much text—keep it scannable.
Use consistent styling and spacing if multiple cards are displayed together.
Avoid placing multiple cards without spacing, which can cause visual clutter.
Maintain a consistent design language across all cards to ensure a cohesive user experience.
Don’t leave the onclick
empty or use console logs in production.
Last updated