Switcher
The switcher layout helper uses Flexbox to switch the display of a group of items, from vertically stacked (at the minimum-viewport width) to horizontal. It uses the l-switcher
class. The threshold at which the switch occurs is determined by the width of the container inside which the switcher layout is used.
The switcher is a good choice for situations where all items are of equal importance and, therefore, equal width. As there are no viewport media queries involved, the switcher will nest nicely inside other containers.
CSS custom properties
--switcher-gap
- Override the threshold width at which the layout is switched, which is set to 43.125rem (690px).
--switcher-threshold
- Override the default spacing between items, which is set to 1.25rem (20px).
Considerations
Note: when the switch to the horizontal display occurs, all items in the group will be affected. This could mean that the items become too narrow if there are a lot of them. You will need to consider this when deciding whether and how to use the switcher layout helper. Amplify provides an optional CSS quantity query that will force the items into the vertical display if there are more than three.