# Pricing Card

## Overview

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

## Usage

### When to use this component?

Pricing cards are used to present the cost and key details of a product, service, or offering in a clear, compact format. They are ideal for use in comparison views, subscription models, product listings, or rental platforms—helping users quickly evaluate pricing, features, and value propositions.

### How it works

A pricing card typically includes an image or icon to represent the item, a title or name, a short description or location, the price (e.g., per month or per unit), and a set of chips or badges to highlight key attributes. Optional labels (e.g., "Featured") or utility icons provide added context or interaction. The layout is optimized for scannability, allowing users to compare multiple offerings and take informed action.

### Code

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

```jsx
<dda-pricing-card
    image_src="https://lipsum.app/id/12/1800x1200"
    image_chip_label="Label"
    image_chip_icon="fiber_manual_record"
    image_chip_icon_family="material-icons"
    image_chip_icon_size="sm"
    header_text="Backend Team"
    header_text_icon="more_horiz"
    card_header_icon_id="cartHeaderAction"
    body_text_icon="sentiment_satisfied"
    body_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    price_text="$1,750.00"
    price_period="month"
    custom_class=""
    component_mode=""
    data-chip-list='[{"chip_text":"3 Bedrooms"},{"chip_text":"1 Bathroom"},{"chip_text":"bnb"}]'
></dda-pricing-card>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaPricingCard
    image_src="https://lipsum.app/id/12/1800x1200"
    image_chip_label="Label"
    image_chip_icon="fiber_manual_record"
    image_chip_icon_family="material-icons"
    image_chip_icon_size="sm"
    header_text="Backend Team"
    header_text_icon="more_horiz"
    card_header_icon_id="cartHeaderAction"
    body_text_icon="sentiment_satisfied"
    body_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    price_text="$1,750.00"
    price_period="month"
    custom_class=""
    component_mode=""
    data-chip-list='[{"chip_text":"3 Bedrooms"},{"chip_text":"1 Bathroom"},{"chip_text":"bnb"}]'
></DdaPricingCard>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaPricingCard
    image_src="https://lipsum.app/id/12/1800x1200"
    image_chip_label="Label"
    image_chip_icon="fiber_manual_record"
    image_chip_icon_family="material-icons"
    image_chip_icon_size="sm"
    header_text="Backend Team"
    header_text_icon="more_horiz"
    card_header_icon_id="cartHeaderAction"
    body_text_icon="sentiment_satisfied"
    body_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    price_text="$1,750.00"
    price_period="month"
    custom_class=""
    component_mode=""
    data-chip-list='[{"chip_text":"3 Bedrooms"},{"chip_text":"1 Bathroom"},{"chip_text":"bnb"}]'
></DdaPricingCard>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-pricing-card
    image_src="https://lipsum.app/id/12/1800x1200"
    image_chip_label="Label"
    image_chip_icon="fiber_manual_record"
    image_chip_icon_family="material-icons"
    image_chip_icon_size="sm"
    header_text="Backend Team"
    header_text_icon="more_horiz"
    card_header_icon_id="cartHeaderAction"
    body_text_icon="sentiment_satisfied"
    body_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    price_text="$1,750.00"
    price_period="month"
    custom_class=""
    component_mode=""
    data-chip-list='[{"chip_text":"3 Bedrooms"},{"chip_text":"1 Bathroom"},{"chip_text":"bnb"}]'
></dda-pricing-card>
```

{% endtab %}
{% endtabs %}

### Properties

| Property               | Description                                                                                                                                                                                                        | Type     |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- |
| `header_text`          | The main title or heading of the pricing card, usually describing the listing or offering (e.g., "Backend Team").                                                                                                  | `string` |
| `header_text_icon`     | The Icon name displayed next to the header text, providing additional visual context (e.g., info, action).                                                                                                         | `string` |
| `card_header_icon_id`  | Unique identifier for the header icon element. Useful for targeting during scripting or testing.                                                                                                                   | `string` |
| <kbd>`body_text`</kbd> | Detailed description or content about the offering.                                                                                                                                                                | `string` |
| `body_text_icon`       | The Icon name shown next to the body text, reinforcing the message visually.                                                                                                                                       | `string` |
| `price_text`           | The price displayed on the card, including currency formatting (e.g., "$1,750.00").                                                                                                                                | `string` |
| `price_period`         | Time period associated with the price (e.g., "month", "week", "one-time")                                                                                                                                          | `string` |
| `custom_class`         | Optional custom CSS class to apply additional or overridden styling to the card.                                                                                                                                   | `string` |
| `component_mode`       | Defines the visual or functional variant of the component (used for theme or layout switching).                                                                                                                    | `string` |
| `chip_list`            | <p>A JSON-formatted array of chips, each displaying quick property details such as features, amenities, or tags.<br>Example:<br><code>\[{ "chip\_text": "3 Bedrooms" }, { "chip\_text": "1 Bathroom" }]</code></p> | `string` |

## Anatomy

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

### Anatomy Options

**Chips:** Used in two areas of the card—over the image as a label (e.g., “New” or category tags), and below the pricing to display key attributes such as number of bedrooms, bathrooms, or type (e.g., “bnb”). They enhance scannability and help users quickly assess features.

**Image:** A visual representation of the item, space, or service, helping users quickly recognize what the card refers to.

**Card Title:** The name of the product, place, or package—serving as the primary identifier for the offering.

**Text Description:** A short secondary line that may show the address, description, or provider information.

**Price Text:** Prominently styled to highlight the cost of the item or service, often paired with a unit (e.g., per month, per hour) or a pricing basis (e.g., per service) to clarify the value proposition.

**Divider:** A subtle line that separates visual and textual elements, ensuring clear layout structure.

**Icons:** Generic interactive or informational symbols that offer additional context or functionality, such as toggles, actions, or indicators.

***

## 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/pricing-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.