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