Skip to content
Amplify from Studio 24
  • Get started
  • Fundamentals
  • Layout helpers
  • Core components
  • Advanced components
  • Typography test
  • Box
  • Center
  • Cluster
  • Cover
  • Frame
  • Sidebar
  • Switcher
  • Autogrid

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).
Item 1
Item 2
Item 3

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.

© Studio 24