Card set menu
Card set menu component is an arrangement of cards to display a group of navigational items of the same nature.
Card component on its own provides a visually appealing solution to represent information on content heavy websites. A set of cards used for presenting featured options help to balance good interface aesthetics with good usability, making features more discoverable and scannable.
Component data
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files l modal.js l coc.animations.js
Functional grouping: Navigation
Demo
Code
Responsive preview
Usage best practices
The card set menu component adapts nicely to different screen sizes and breakpoints. While the screen size scales down, cards stack and eventually merge into one card.
Consider using card set menu when:
- the goal is to help users browse the site more easily
- drawing attention to a group of features, of equal importance
- it is helpful to provide contextual information to menu options
Related components:
Do
Use card set menu to make features more discoverable.
Don't
Do not replace primary and/or secondary navigation with card set menu.
Do not use card set menu for more than eight items where scannability and comparison are priorities. Use list instead.