Event Card
Event cards provide a compact, visually engaging way to display key details about upcoming events, enabling quick discovery, interaction, and navigation.
Overview
Usage
When to use this component?
Event cards are used to highlight upcoming events in a compact, visually engaging format. Ideal for dashboards, landing pages, or event listings, they provide users with at-a-glance details like date, time, location, and participants, encouraging quick discovery and interaction.
How it works
Event cards integrate visual and textual elements—such as banners, dates, titles, descriptions, and avatars—into a single interactive block. Key information like event time, date, location, and attendee previews are clearly displayed, with optional actions (e.g., "Open") allowing users to explore more. This layout improves scannability and promotes engagement by offering a clear, actionable summary of the event.
Code
<dda-event-card
card_header_text="Event"
card_header_icon="more_horiz"
card_header_icon_id="cartHeaderAction"
image_src="https://lipsum.app/id/12/1800x700"
event_month="Oct"
event_date="26"
header_text="Backend Team"
body_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
custom_class=""
component_mode=""
data-chip-list='[{"chip_text":"11:49"},{"chip_text":"29.20.2023"},{"chip_text":"Wall St."}]'
data-avatar-list='[{"src":"https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"},{"src":"https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"},{"src":"https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"},{"src":"https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"}]'
></dda-event-card>Properties
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
image_src
URL path to the banner image displayed in the card.
string
event_month
Short-form month (e.g., "Oct", "Dec") indicating when the event takes place.
string
event_date
Day of the month (e.g., "26") representing the event date.
string
header_text
The main title or name of the event (e.g., "Backend Team").
string
body_text
Descriptive text providing more context or details about the event.
string
custom_class
Optional custom CSS class to apply additional styling to the card.
string
component_mode
Defines the visual or functional mode of the component. Can be used to switch between layout or style variants.
string
data-chip-list
A JSON-formatted array of chip objects. Each chip typically displays event-related metadata such as time, date, or location.
Example: [{ "chip_text": "11:49" }, { "chip_text": "29.20.2023" }]
string
data-avatar-list
A JSON-formatted array of avatar objects, typically used to show associated team members or speakers.
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.
Display Date: Prominently displays the event date in a badge style to draw attention at a glance.
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.
Chips: Compact elements displaying essential event metadata like time, full date, and location.
Icon & Avatar: Profile images of attendees, offering a social preview of who is joining the event.
Icon Button: A action button that typically opens a list of additional participants or adds new ones.
Divider: A horizontal line that separates the main content from actions, enhancing visual organization and readability.
Link Button: A clear call-to-action that guides users to view more detailed event information.
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