The file-preview-card-group is a group of single or multiple file preview cards.

This component is an atomic piece file-preview-card which is the recommended piece to use. Using other components may result in unexpected results.

Base

Responsive Out of the Box

Similar to Toggle Button Group, this component is responsive out of the box. The cards will responsively shrink and stretch the specific type of cards inside and attempt to fit the cards nicely within the container at any and all screen sizes.

We use display: grid to create a predefined allotted number of card slots per breakpoint. We also use container queries to modify how many slots should be available per breakpoint. This allows cards to shrink/stretch the predefined number of cards at each breakpoint with a fallback to media queries for unsupported browsers.

The responsive rules around how many toggle cards appear on a single line before wrapping into a new line have all been predefined and baked into the component, so developers don't need to provide anything else to have an optimal responsive layout at various screen sizes.

In the demo below, drag the range to see the responsive rules in action.