Card View displays content in a graphical way that is not possible with a Table or List View. The characteristics of this view can be used to tuck actions out of the way until they are needed, or to place emphasis on actions that are crucial to the correct use of the product.
This design follows the convention set by the toolbar actions pattern and breaks actions into two categories depending on importance and frequency of use.
Actions front and center
- If a card has one or two actions that are important to the utility of the object. They may be placed as buttons on the card itself.
- Optionally, a single action may be emphasized as the primary action. If showing action buttons does not leave enough space on the card for other information, consider transferring nonessential actions into a drop-down menu.
Actions in a drop-down
- Actions that are not used frequently are placed in the kebab (vertical ellipse) menu. This menu can be found on the top right corner of the card and becomes visible on hover. Any actions that can be performed by dragging and dropping the card, or through a similar interaction method, should also be duplicated as items in this menu. Very large numbers of actions should be placed in the Actions section of the Toolbar rather than on the card.
- Is there a reason for buttons to contain a group or category of actions rather than just a single action?
After review, this pattern will be moving into the final design phase. High-fidelity visual assets and examples in context will be created, and the revised, polished design will be posted.
Voice your opinion! Comment on this post with thoughts, suggestions, or requirements that we may have overlooked. Any and all feedback is helpful to us as we refine the design in the next stage of the process. Thanks!