# Video Card

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FGWqrSgM9L31JEWJEvFTt%2FVideo%20Card%20-%20Overview.png?alt=media&#x26;token=1dbe64b1-3df7-4a2b-af9f-90b59b39a567" alt=""><figcaption></figcaption></figure>

## 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

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-image-card
    image_src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvhlzYedWoCSkLB2HFQ87P5gPjCmJqmTt8vw&amp;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>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaImageCard
    image_src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvhlzYedWoCSkLB2HFQ87P5gPjCmJqmTt8vw&amp;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=""
></DdaImageCard>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaImageCard
    image_src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvhlzYedWoCSkLB2HFQ87P5gPjCmJqmTt8vw&amp;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=""
></DdaImageCard>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-image-card
    image_src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvhlzYedWoCSkLB2HFQ87P5gPjCmJqmTt8vw&amp;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>
```

{% endtab %}
{% endtabs %}

### Properties

| Prop                         | Type   | Description                                                       |
| ---------------------------- | ------ | ----------------------------------------------------------------- |
| `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

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FkK1En2YZMn2dg1blIJM8%2FVideo%20Card%20-%20Anatomy.png?alt=media&#x26;token=3694ef1b-88fa-4781-aa87-fd8ca4f187cc" alt=""><figcaption></figcaption></figure>

### 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

| Dos                                                                             | 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. |