Examples
Examples
Basic Usage
The Video Card only needs a few data points to render a fully functional card.
Best Practices:
- The headline and text should use sentence-case
- Headlines shouldn't hold more than 75 characters, and a maximum of 40 when displaying Asian characters
- Images should always be paired with an alternative text to support assistive technologies
Extended Usage
Optionally, the Video Card can be extended with additional information
Best Practices:
- The tag should use title-case
- The tag is used to categorize cards, for example by discipline
- The badge is only used for promoting selected cards
- The duration is rounded to full minutes using a minimum of one minute
Live Badge
Video Cards can be indicated whether their video is premiering live.
Preview Video
A great way to turn the Video Card into an engaging teaser is to add a video that appears on hover gesture
Best Practices
- The duration of the video should be limited to 5 seconds
Preview Image
To improve the user experience and performance of Video Cards use preview images while waiting for the high-resolution image to be loaded.
Note: The example below demonstrates the rendering of the preview image only. In a production environment, a high-resolution _image_ would be set alongside
Best practices:
- Preview images should be a scaled version of the featured image with a maximum of 50px width
- To ensure meaningful content to be shown as fast as possible without any additional network requests preview images should be provided as base64 encoded data URIs
Responsive Image and Performance
A great way to balance client-side performance and responsive images is by using srcset in conjunction with sizes and loading attributes. Read more about responsive image best practices here: Image
Logo
Instead of a tag, Video Cards can display a logo.
Best practices:
- The logo is only used for brands or projects, not for sponsors
- Logos should be SVG or PNG images with a transparent background
- Logos with a width/height ratio lower than 1.5 should have logo-narrow enabled to optimized the appearance on the card
Make it favoritable
Video Cards can be favorited by users – while the favorite button will be persistently displayed on touch-based devices, the button will only show up on hover on devices with pointer-based inputs.
Best practices:
- The state of whether the Video has been favorited or not has to be managed outside the component
- The favorite-aria-label should reflect the action that will be performed based on the current "favorite" state
- Clicking on the favorite button won't propagate the click event to the card component and won't go in the way of catching link redirection.
Compact Layout
Video Cards support a compact layout for use cases where it doesn't have enough space available.
💡 Pro Tip
The Video Card's layout is a Responsive Properties and can be configured per breakpoint. Try out this example
Best Practices:
- The Video Card should use a compact layout whenever the available width is smaller than 290px
Listen to Resize Events
When initially mounting and whenever the media container of the Video Card resizes, the card emits a mediaresize event including the media's width and height.
A common use-case is to update the image to make it perfectly fit the available space.
Best Practices:
- Only enable the observe-media-resize when needed