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

Component resources:
SCSS files l modal.js l coc.animations.js

Functional grouping: Navigation

Demo

Lorem ipsum

Lorem ipsum dolor sit amet

Call to action text


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

Do

Use card set menu to make features more discoverable.

Don't

Don't

Do not replace primary and/or secondary navigation with card set menu.

Don't

Do not use card set menu for more than eight items where scannability and comparison are priorities. Use list instead.