Event Card
Banner cards use interactive and clickable features to engage users, enhancing the presentation of content effectively.
Overview
Usage
When to use this component?
Use this Event Card component when you need to visually highlight a scheduled event or team gathering in a structured and engaging way. It's ideal for dashboards, event listings, team collaboration tools, or internal portals that promote transparency around upcoming activities.
Typical use cases include:
Displaying upcoming team meetings or events
Summarizing key event details (date, time, location)
Visually showcasing participation with avatars
Providing a quick access point to more event information
How it works
This card organizes event information into a clean layout with the following elements:
Header Section:
A small title indicating it's an event (
Event)A context menu icon (3 dots) for possible actions (e.g., edit, delete, share)
Date Badge:
A prominent label showing the event date (month and day)
Banner Image:
A wide image related to the event or theme, adding visual appeal
Event Info Block:
Title: Name of the event (e.g., “Backend Team”)
Description: Brief summary of the event or purpose
Metadata Tags:
Time, Date, and Location presented in pill-style buttons with icons
Participants:
A row of avatar icons representing attendees
A "+" button to indicate more users or to add members
Footer Action:
A text link/button ("Open") to dive into more details or perform an action
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
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