Custom Cards

Custom cards provide a flexible, user-driven layout that allows full control over the card’s appearance and content. Ideal for showcasing a variety of data types or visuals, these cards can be styled,

Overview

Usage

When to use this component?

Custom cards are perfect when you need flexibility in both design and content. Use them when standard card layouts don't meet your requirements, and you want to tailor the structure, style, and interaction to suit specific data types, user needs, or branding guidelines. Ideal for dashboards, content feeds, or modular UI sections, custom cards empower designers and developers to create rich, personalized components.

How it works

Custom cards act as a configurable container that supports dynamic content and layout customization. Users can define their own combinations of elements—such as headings, icons, buttons, media, and metadata—and control styling aspects like spacing, colors, and typography. This modular approach enables the creation of reusable components while allowing full creative freedom to adapt to various use cases. Optional slots or configuration props can be used to inject custom content or interactivity, making the cards highly versatile across projects.

Code

<dda-custom-card
    card_header_text="Card Custom Title"
    card_header_icon="more_horiz"
    card_header_icon_id="cartHeaderdotts"
    custom_class="custom-card"
    component_mode=""
>
    <img src="https://lipsum.app/id/12/1800x800" class="dda-card-img dda-rounded-md" alt="card image"/>
    <h5 class="h5 Regular" aria-label="Card title">Card main title</h5>
    <p class="dda-card-text dda-d-flex dda-align-items-start dda-gap-2" aria-label="Card description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <div class="dda-row">
        <div class="dda-col-6">
            <dda-button
                button_type="button"
                button_color="default-primary"
                start_icon=""
                button_text="Cancel"
                end_icon=""
                button_id="default-primary-btn"
                aria_label="default primary button"
                button_name="defaultPrimaryButton"
                value="default-primary-value"
                button_shape="default"
                size="md"
                gap="1"
                disabled="false"
                custom_class="dda-w-100"
                component_mode=""
                onclick="console.log('native click')"
            ></dda-button>
        </div>
        <div class="dda-col-6">
            <dda-button
                button_type="button"
                button_color="default-primary"
                start_icon=""
                button_text="Submit"
                end_icon=""
                button_id="default-primary-btn"
                aria_label="default primary button"
                button_name="defaultPrimaryButton"
                value="default-primary-value"
                button_shape="default"
                size="md"
                gap="1"
                disabled="false"
                custom_class="dda-w-100"
                component_mode=""
                onclick="console.log('native click')"
            ></dda-button>
        </div>
    </div>
</dda-custom-card>

Properties

Property
Description
Type

card_header_text

The label displayed at the top of the banner card, typically indicating the card’s category or context (e.g., "Event").

string

card_header_icon

Name of the Icon to be shown alongside the header text.

string

card_header_icon_id

Unique identifier for the header icon element. Useful for targeting the icon programmatically (e.g., for click events or testing).

string

Anatomy

Anatomy Options

Card Title: Indicates the type of content (e.g., “Event”), helping users immediately recognize the card’s purpose.

Icon: con: A contextual icon that can represent various functions such as settings, alerts, status indicators, or additional options—serving as a quick access point for supporting actions or information relevant to the event card.

Image: A banner image representing the event, used for visual context and thematic consistency.

Event Title: The primary title of the event, clearly stating its name or subject.

Description: A short text summary providing users with a quick overview of the event’s focus or content.

Button: A clear call-to-action that guides users to view more detailed event information.

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.

PreviousVideo CardNextChips

Last updated