Guidelines
Guidelines
Usage
A Default 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 Default 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).
- Have the cover property to 'true' for covering the entire surface of the Card with an engaging visual preview of the asset. This is recommended especially for assets with attractive media assets that work in portrait orientation.
- 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 2 rows 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 Default 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 Default 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 Default 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.