# Banner Cards

## Overview

<figure><img src="/files/D8ayxY1Pc9k6O9znIias" alt=""><figcaption></figcaption></figure>

## 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

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-banner-card
  banner_card_type="button"
  image_src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvhlzYedWoCSkLB2HFQ87P5gPjCmJqmTt8vw&s"
  image_alt="image alt"
  banner_card_title="Card Title"
  banner_card_description="Lorem Ipsum..."
  banner_card_id="exampleId"
  custom_class=""
  component_mode=""
  banner_card_value="optional value"
  banner_card_name="optional name"
></dda-banner-card>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaBannerCard
  banner_card_type="button"
  image_src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvhlzYedWoCSkLB2HFQ87P5gPjCmJqmTt8vw&s"
  image_alt="image alt"
  banner_card_title="Card Title"
  banner_card_description="Lorem Ipsum..."
  banner_card_id="exampleId"
  custom_class=""
  component_mode=""
  banner_card_value="optional value"
  banner_card_name="optional name"
></DdaBannerCard>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaBannerCard
  banner_card_type="button"
  image_src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvhlzYedWoCSkLB2HFQ87P5gPjCmJqmTt8vw&s"
  image_alt="image alt"
  banner_card_title="Card Title"
  banner_card_description="Lorem Ipsum..."
  banner_card_id="exampleId"
  custom_class=""
  component_mode=""
  banner_card_value="optional value"
  banner_card_name="optional name"
></DdaBannerCard>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-banner-card
  image_src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvhlzYedWoCSkLB2HFQ87P5gPjCmJqmTt8vw&s"
  banner_card_type="button"
  image_alt="image alt"
  banner_card_title="Card Title"
  banner_card_description="Lorem Ipsum..."
  banner_card_id="exampleId"
  custom_class=""
  component_mode=""
  banner_card_value="optional value"
  banner_card_name="optional name"
></dda-banner-card>
```

{% endtab %}
{% endtabs %}

### Properties

| Property                  | Description                                                                      | Type     |
| ------------------------- | -------------------------------------------------------------------------------- | -------- |
| `image_src`               | Path to the icon or image shown on the banner card.                              | `string` |
| `image_alt`               | Displays descriptive text when images fail to load, maintaining content clarity. | `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` |
| `banner_card_id`          | Unique identifier for the banner card (useful for targeting).                    | `string` |
| `custom_class`            | Additional CSS classes to apply for custom styling.                              | `string` |
| `component_mode`          | Defines the component behavior mode (e.g. compact, readonly).                    | `string` |
| `banner_card_value`       | Optional value to associate with the card (used in form or state context).       | `string` |
| `banner_card_name`        | Optional name attribute to group or identify cards                               | `string` |

## Anatomy

<figure><img src="/files/6YsfhU7BTpKkQq73seJg" alt=""><figcaption></figcaption></figure>

**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

| Dos                                                                                          | 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.**                   |


---

# 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/cards/banner-cards.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.