Guidelines
Guidelines
Usage
A Link Card should:
- Be used for leading people to external assets.
- 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 Link Card should:
- Use enticing content on the card that sets expectations correctly.
- Include as much content as possible for maximum engagement. It is recommended to include at least a headline, text, and a link in the card's data.
- 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.
- Have its URL truncated so that the ellipsis appears before the last letter of the domain name when it runs out of space, i.e. “domain-nam…e.com”.
- Provide a tag when it’s necessary for additional context.
Logo
A Link 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.
- Have its logo made available in a dark version for a 'light' appearance card and light version for a 'dark' appearance card.
- Have its logos uploaded 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.
Layout
A Link 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.
- Be resized proportionally when used in layouts without adjusting font metrics.
Accessibility
A Link 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.