Group Card
Group cards provide a concise, visually structured summary of a team or group, enabling users to review key details and take action with clarity and confidence.
Overview
Usage
When to use this component?
Group cards are used to display and confirm group-related information in a concise, focused format. Ideal for collaboration platforms, team selection flows, or onboarding experiences, they help users review key details—such as group name, description, and associated avatar—before proceeding with an action.
How it works
Group cards combine visual identity (group avatar), a title (e.g., group or team name), a brief description, and clear action buttons such as “Cancel” and “Continue.” This structure ensures that users can quickly recognize the group, understand its context, and either proceed or abort the interaction. The layout promotes clarity, reinforces intentional actions, and supports a smooth user experience when managing or joining groups
Code
<dda-information-card
image_src="https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"
image_alt="alternate text"
header_text="Team"
body_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
left_button_name="Cancel"
left_button_href="https://example.com"
left_button_rel=""
left_button_start_icon=""
left_button_end_icon=""
left_button_data_fancybox=""
left_button_target=""
right_button_name="Continue"
right_button_href="https://example.com"
right_button_rel=""
right_button_start_icon=""
right_button_end_icon=""
right_button_data_fancybox=""
right_button_target=""
custom_class=""
component_mode=""
></dda-information-card>Properties
Property
Description
Type
image_src
URL of the image to display on the card.
string
image_alt
Alternative text for the image, used for accessibility.
string
header_text
Text to display as the card header/title.
string
body_text
Main descriptive text/content of the card.
string
left_button_name
Text label for the left button.
string
left_button_href
URL the left button links to.
string
left_button_rel
rel attribute for the left button's link (e.g., "noopener noreferrer").
string
left_button_start_icon
Icon name to show at the start (left) of the left button label.
string
left_button_end_icon
Icon name to show at the end (right) of the left button label.
string
left_button_data_fancybox
Optional attribute for integrating with Fancybox or similar plugins on the left button.
string
left_button_target
Target attribute for the left button link (e.g., "_blank" to open in new tab).
string
right_button_name
Text label for the right button.
string
right_button_href
URL the right button links to.
string
right_button_rel
rel attribute for the right button's link.
string
right_button_start_icon
Icon name to show at the start of the right button label.
string
right_button_end_icon
Icon name to show at the end of the right button label.
string
right_button_data_fancybox
Optional Fancybox integration attribute for the right button.
string
right_button_target
Target attribute for the right button link.
string
custom_class
Custom CSS class to add extra styling to the card.
string
component_mode
Optional mode or variant of the component (if applicable).
string
Anatomy
Anatomy Options
Avatar: A image representing the group or a key member, used to establish visual identity and context.
Card Title: Displays the name of the group or team, serving as the primary identifier.
Description: A brief text block that provides supporting context about the group, its purpose, or relevant details.
Divider: A horizontal line that visually separates content from action buttons, enhancing layout clarity.
Primary Button: A high-emphasis action that confirms the user’s selection or initiates the next step in the flow.
Tertiary Button: A lower-emphasis action allowing the user to back out or dismiss the card without proceeding.
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