Guidelines
Guidelines
Usage
A Video Card should:
- Be used for leading people to video assets on the same platform.
- Be grouped with related Cards into vertical feed and horizontal rail interfaces.
- Have appearance be set to 'dark' in light interfaces and 'light' in dark interfaces.
- Use the respective viewport property for the interface. 'desktop' for desktop interface designs and 'mobile' for mobile interfaces.
Content
A Video Card should:
- Use enticing content on the Card that sets expectations correctly. For the featured-image, check out the Image guidelines.
- Include an image asset that is replaced by a "preview video" of a maximum of 5 seconds in length when provided. The "preview video" is presented when a user hovers over a card (on cursor devices) or when the card scrolls to the viewport (on touch devices).
- Include as much content as possible for maximum engagement. It is recommended to include at least a headline, text, and a tag in the Card's data. For meta-text it is recommended to present the running time of the asset.
- Limit the title to a maximum of 5 rows of text, after which it's truncated with an ellipsis.
- Limit the text to a maximum of 1 row of text, after which it's truncated with an ellipsis.
- Include a badge for highlighting a Card. Badges should be used sparingly. A label for a badge should be short and clear describing why it is there, for example: "New" or "Popular".
Logo
A Video Card should:
- Provide a logo when the additional context is desired to be established. Note that by adding a logo the tag will be replaced by it.
- Provide a dark version of the logo asset for a 'light' appearance Card and light version for a 'dark' appearance Card.
- Provide a logo asset without any bounding boxes on a transparent background for optimal visibility.
- Have its logo be set to 'is-narrow' for optimized logo presentation of square and tall logo aspect ratios.
Favoritable
The favoritable button should:
- Be set to 'true' for users to be able to add it to their list.
- Update its state, with its icon and label, when the user interacts with it.
- Have a clear label, such as "Add to Favorites" when available.
- Include a clear aria-tag for accessibility, especially when no label is included.
Layout
A Video Card should:
- Have its layout be set to ‘normal’ when the Card is used in feeds, vertical layouts, or featured in a stand-alone context.
- Have its layout be set to ‘compact’ when the Card is being used in rails or in a narrow horizontal interface.
- Always use the same layout value for all Cards in a group.
- Keep its original Elevation and appearance when subject to interactions in design.
- Be resized proportionally when used in layouts without adjusting font metrics manually. This conserves a balanced layout following the Gestalt Principles of Similarity, as the font metrics are implemented with fluid-typography.
Accessibility
A Video Card should:
- Have a descriptive image-alt attribute (alternate text) for providing the content in an alternative text-based format and making the image more accessible without repeating other content on the Card.
- Have an image-alt attribute, unless it’s for decorative purposes. Including “image of...” or “photo of...” in the alt attribute is not needed, as assistive technologies take care of declaring the media type.