Media
Joule / Components / Media
Intro
A media card is a card container that displays videos and images from Joule.
Media card for image (left) and media card for video (right)
Usage
Do
- Check supported media formats before using a media card.
- If the media can’t be rendered in a card, use a URL or other approaches to provide access to it.
Don't
- Don’t overwhelm users with multiple media cards at the same time.
- Don’t exceed the maximum width.
Variations
Media Card for Images
Media card for images
Media Card for Videos
A media card for videos can be used to display videos in supported formats. For the video to be displayed in the card, it must be available to the user without further authentication. The media player from the original platform, such as YouTube, will be embedded in the card.
Behaviors and actions are defined by the player and are only limited to within the card.
Media card for videos with embedded media player
Behavior and Interaction
Error State
If Joule fails to render the media content, display an illustrated message inside the media card to inform users about the error.
"Unable to load” error in a media card
Empty URL error in a media card