Shelves

Shelves provide a flexbox framework for arranging groups of items such as cards. You might choose to use shelves instead of the switcher layout helper if:

• you want to specify the number of items on each shelf in relation to the viewport width rather than the width of the parent container
• you want to change how many items can fit on a shelf depending on the total number of items, using CSS quantity queries - use Quantity Queries Builder to roll your own quantity queries
• items don't have to follow a rigid grid pattern and can grow horizontally to fill up the space on a shelf when there are fewer than the maximum possible (much like a cat taking up all the available space)

Considerations

The example above uses an unordered list to hold the cards. Because the cards pattern uses headings that fit in with the surrounding page hierarchy, role="presentaton" is added to the unordered list to reduce the verbosity of announcements for assitive technology users.