Pricing Card

The Pricing Card is a flexible UI component designed to present pricing-based content or listings — such as real estate, SaaS plans, or subscription offerings — in a visually engaging and informative

Overview

Usage

When to use this component?

Use this component when you need to:

  • Showcase plans, packages, or products with pricing details.

  • Display real estate listings (e.g., houses, rentals, accommodations).

  • Summarize offerings with a visual thumbnail, iconic tags, and monthly pricing.

  • Provide quick, scannable highlights (e.g., features, labels, cost).

How it works

  • Image Section with:

    • A banner-style thumbnail (image_src)

    • A floating chip label over the image (e.g., status or type), customizable with an icon (image_chip_label, image_chip_icon)

  • Header Row:

    • Prominent title (header_text, e.g., "Backend Team")

    • Optional header icon (e.g., more_horiz) for actions or menu

  • Body Section:

    • Icon + Description (body_text_icon, body_text) offering a brief overview of the item

  • Feature Chips:

    • Rendered via data-chip-list (e.g., “3 Bedrooms”, “1 Bathroom”, “bnb”) to show features, amenities, or highlights

  • Pricing Display:

    • Clearly shows the price (price_text) and billing frequency (price_period), such as per month

  • Fully customizable using custom_class and component_mode for styling or conditional rendering

Code

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

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

body_text

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

A JSON-formatted array of chips, each displaying quick property details such as features, amenities, or tags. Example: [{ "chip_text": "3 Bedrooms" }, { "chip_text": "1 Bathroom" }]

string

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.

PreviousEvent CardNextTeam Section Cards

Last updated