Image cards are styled containers that group related content and actions. Image cards should be used to provide a preview of an item. Use the base card component to display an individual item, while the collection card should be used to provide a preview of a single collection.
A card is made up of an image and corresponding information. For individual items, this could be the item's title, author, date and which collection it's from. For collections, it could be the title of the collection, the number of items it has, and a description.
- Use image cards with the layout component to present rows of cards
- Use the same heading level for titles of items or collections when applied to a large group of cards
- Use overly small or large images for the cards
- Provide more than three sections of metadata
The image provided should have sufficient resolution, it should not be blurry.
The title should indicate what the image being displayed is or represents.
The information should pertain to the item being presented. Truncation should be applied for a section if it exceeds two lines.
The base variant is used to present individual items that have an associated image alongside corresponding information or metadata.
The collection variant is used to portray a single collection. A larger image is shown in 4:3 aspect ratio format with corresponding information or metadata.
452 itemsUse a subtle card state to indicate to the user that the image must be hovered for additional information about the item to be shown with an overlay.
Display an error card state to indicate to the user that the image is not available due to a server or access issue.
An image card that has an action menu indicates to the user that additional actions can be taken on the item by rendering an action button that triggers a dropdown menu.
1.3.1 Info and Relationships A 1.1.1 Non-text Content
An image card visually and textually portrays an item or collection to help a user gain greater understanding of its context
- Each card needs to have a heading of the same level because they belong to a flat list hierarchy.
- All image cards should be put into a list (
<li>) element so users can understand their relationship to each other - Every image needs to have an alternative text tag
alt="any relevant visual information"
- Links should use the
<a>element
- When the image has focus, reads "alt" text
- When focus is on a link it reads: "Link text, link"
- Tab: goes to next element
- Shift + Tab: goes to previous element
- Enter: goes to link destination