# Group Card

## Overview

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

## Usage

### When to use this component?

Group cards are used to display and confirm group-related information in a concise, focused format. Ideal for collaboration platforms, team selection flows, or onboarding experiences, they help users review key details—such as group name, description, and associated avatar—before proceeding with an action.

### How it works

Group cards combine visual identity (group avatar), a title (e.g., group or team name), a brief description, and clear action buttons such as “Cancel” and “Continue.” This structure ensures that users can quickly recognize the group, understand its context, and either proceed or abort the interaction. The layout promotes clarity, reinforces intentional actions, and supports a smooth user experience when managing or joining groups

### Code

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

```jsx
<dda-information-card
    image_src="https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"
    image_alt="alternate text"
    header_text="Team"
    body_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    left_button_name="Cancel"
    left_button_href="https://example.com"
    left_button_rel=""
    left_button_start_icon=""
    left_button_end_icon=""
    left_button_data_fancybox=""
    left_button_target=""
    right_button_name="Continue"
    right_button_href="https://example.com"
    right_button_rel=""
    right_button_start_icon=""
    right_button_end_icon=""
    right_button_data_fancybox=""
    right_button_target=""
    custom_class=""
    component_mode=""
></dda-information-card>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaInformationCard
    image_src="https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"
    image_alt="alternate text"
    header_text="Team"
    body_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    left_button_name="Cancel"
    left_button_href="https://example.com"
    left_button_rel=""
    left_button_start_icon=""
    left_button_end_icon=""
    left_button_data_fancybox=""
    left_button_target=""
    right_button_name="Continue"
    right_button_href="https://example.com"
    right_button_rel=""
    right_button_start_icon=""
    right_button_end_icon=""
    right_button_data_fancybox=""
    right_button_target=""
    custom_class=""
    component_mode=""
></DdaInformationCard>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaInformationCard
    image_src="https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"
    image_alt="alternate text"
    header_text="Team"
    body_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    left_button_name="Cancel"
    left_button_href="https://example.com"
    left_button_rel=""
    left_button_start_icon=""
    left_button_end_icon=""
    left_button_data_fancybox=""
    left_button_target=""
    right_button_name="Continue"
    right_button_href="https://example.com"
    right_button_rel=""
    right_button_start_icon=""
    right_button_end_icon=""
    right_button_data_fancybox=""
    right_button_target=""
    custom_class=""
    component_mode=""
></DdaInformationCard>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-information-card
    image_src="https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"
    image_alt="alternate text"
    header_text="Team"
    body_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    left_button_name="Cancel"
    left_button_href="https://example.com"
    left_button_rel=""
    left_button_start_icon=""
    left_button_end_icon=""
    left_button_data_fancybox=""
    left_button_target=""
    right_button_name="Continue"
    right_button_href="https://example.com"
    right_button_rel=""
    right_button_start_icon=""
    right_button_end_icon=""
    right_button_data_fancybox=""
    right_button_target=""
    custom_class=""
    component_mode=""
></dda-information-card>
```

{% endtab %}
{% endtabs %}

### Properties

| **Property**                 | **Description**                                                                         | **Type**                   |
| ---------------------------- | --------------------------------------------------------------------------------------- | -------------------------- |
| `image_src`                  | URL of the image to display on the card.                                                | `string`                   |
| `image_alt`                  | Alternative text for the image, used for accessibility.                                 | `string`                   |
| `header_text`                | Text to display as the card header/title.                                               | `string`                   |
| `body_text`                  | Main descriptive text/content of the card.                                              | `string`                   |
| `left_button_name`           | Text label for the left button.                                                         | `string`                   |
| `left_button_href`           | URL the left button links to.                                                           | `string`                   |
| `left_button_rel`            | `rel` attribute for the left button's link (e.g., `"noopener noreferrer"`).             | `string`                   |
| `left_button_start_icon`     | Icon name to show at the start (left) of the left button label.                         | `string`                   |
| `left_button_end_icon`       | Icon name to show at the end (right) of the left button label.                          | `string`                   |
| `left_button_data_fancybox`  | Optional attribute for integrating with Fancybox or similar plugins on the left button. | `string`                   |
| `left_button_target`         | Target attribute for the left button link (e.g., `"_blank"` to open in new tab).        | `string`                   |
| `right_button_name`          | Text label for the right button.                                                        | `string`                   |
| `right_button_href`          | URL the right button links to.                                                          | `string`                   |
| `right_button_rel`           | `rel` attribute for the right button's link.                                            | `string`                   |
| `right_button_start_icon`    | Icon name to show at the start of the right button label.                               | `string`                   |
| `right_button_end_icon`      | Icon name to show at the end of the right button label.                                 | `string`                   |
| `right_button_data_fancybox` | Optional Fancybox integration attribute for the right button.                           | `string`                   |
| `right_button_target`        | Target attribute for the right button link.                                             | `string`                   |
| `custom_class`               | Custom CSS class to add extra styling to the card.                                      | `string`                   |
| `component_mode`             | Optional mode or variant of the component (if applicable).                              | `string`                   |
| useNavigator                 | Enables/Disables the use of event listener instead of href attribute on links           | string ("true" \| "false") |
| navigatorClick               | Use it to capture the on click event after useNavigator is set to true                  | EventListener              |

## Anatomy

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

### Anatomy Options

**Avatar:** A image representing the group or a key member, used to establish visual identity and context.

**Card Title:** Displays the name of the group or team, serving as the primary identifier.

**Description:** A brief text block that provides supporting context about the group, its purpose, or relevant details.

**Divider:** A horizontal line that visually separates content from action buttons, enhancing layout clarity.

**Primary Button:** A high-emphasis action that confirms the user’s selection or initiates the next step in the flow.

**Tertiary Button:** A lower-emphasis action allowing the user to back out or dismiss the card without proceeding.

***

## 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/group-card.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.