Video Card
Video cards deliver key video content with supporting details and actions in a compact, engaging layout.
Overview
Usage
When to use this component?
A Video Card is used to promote or preview video content within a website or application. It’s ideal for media libraries, learning platforms, or landing pages where users can engage with visual media directly or be directed to a detailed video page.
How it works
The card typically includes a thumbnail image, play icon overlay, title, and optional description or metadata (e.g., duration or category). Clicking the card either plays the video in-place or redirects the user to a dedicated video screen. This format encourages quick discovery and intuitive playback.
Code
<dda-image-card
image_src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvhlzYedWoCSkLB2HFQ87P5gPjCmJqmTt8vw&s"
image_alt="alternate text"
header_text="Backend Team"
date_text="31 September 2024"
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=""
file_size="Size: "
file_type="Type: "
custom_class=""
component_mode=""
></dda-image-card>Properties
image_src
string
URL of the image displayed in the card.
image_alt
string
Alternate text for the image for accessibility.
header_text
string
Header title text shown on the card.
date_text
string
Date or subtitle text shown under the header.
body_text
string
Main content or description text displayed on the card.
left_button_name
string
Text for the left action button.
left_button_href
string
URL for the left action button link.
left_button_rel
string
Rel attribute for the left button (e.g. "noopener noreferrer").
left_button_start_icon
string
Icon name to show before left button text (optional).
left_button_end_icon
string
Icon name to show after left button text (optional).
left_button_data_fancybox
string
Data attribute for fancybox integration on left button.
left_button_target
string
Target attribute for left button ("_blank", "_self", etc).
right_button_name
string
Text for the right action button.
right_button_href
string
URL for the right action button link.
right_button_rel
string
Rel attribute for the right button.
right_button_start_icon
string
Icon name before right button text (optional).
right_button_end_icon
string
Icon name after right button text (optional).
right_button_data_fancybox
string
Data attribute for fancybox on right button.
right_button_target
string
Target attribute for right button.
file_size
string
Text label showing file size (if applicable).
file_type
string
Text label showing file type (if applicable).
custom_class
string
Additional CSS class(es) to customize styling.
component_mode
string
Optional mode to alter card style or behavior (if implemented).
Anatomy
Anatomy Options
Avatar: Represents the author, speaker, or contributor associated with the video.
Video: A thumbnail or preview still of the video content; serves as a visual hook.
Date Label: Displays the publishing or recording date for quick context.
Card Title: Communicates the main subject or title of the video, drawing user attention.
Description: A short summary or context related to the video content.
Divider: Separates content from actions, maintaining visual hierarchy.
Primary Button: A main action (e.g., Continue or Watch), driving user engagement.
Tertiary Button: A low-priority action (e.g., Cancel), offering users a non-primary route.
Dos and Don'ts
Use a high-quality, relevant thumbnail or still for the video.
Don’t use blurry, unrelated, or low-resolution videos.
Clearly label the video title and provide a short, meaningful description.
Don’t use vague or overly long titles and descriptions.
Include a visible play indicator or call-to-action (e.g., “Watch”, “Continue”).
Don’t make users guess whether the card is interactive.
Use consistent styling for buttons and spacing between elements.
Don’t overcrowd the card or use inconsistent visual elements.
Last updated