Guidelines
Guidelines
Usage
A Story Card should:
- Be used for leading people to story 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. 'desktop' for desktop interface designs and 'mobile' for mobile interfaces.
Content
A Story Card should:
- Use enticing content on the Card that sets expectations correctly. For the featured-image, check out the Image guidelines.
- 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 a calculated reading 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 Story 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 Story 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 Story 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 are taking care of declaring the media type.