While some teams choose to preconfigure how content within a slot will appear, there are times where additional controls are needed to achieve a desired outcome.

Our Layout Options give your team the tools to adjust the content within a slot to align with guidelines. 

General Options

Layout

Choose between Horizontal, Vertical, or Wrap.

Align

Choose between Top Left, Top Center, Top Right, Left, Center, Right, Bottom Left, Bottom Center, and Bottom Right.

Gap

Control the horizontal or vertical spacing between items based on your Layout setting. Use a dimension token, or set a static pixel, rem, or percentage value.

Padding

Choose to control the horizontal and vertical padding of the slot itself. You can also toggle on "Individual Padding" to control separate entries for top, bottom, left, and right padding values.

Use a dimension token, or set a static pixel, rem, or percentage value.

Theme

With variable collections configured you'll have the option to apply a different mode to the slot itself. This can be helpful when demonstrating adjusting a density mode of part of a component while the overall component uses a different mode. 

CSS Classes

Many systems rely on CSS systems to achieve desired outcomes such as Tailwind. Apply a flexible space separated list of CSS classes to adjust and style the slot for your needs.

Improved UX for Managing Items

• Items can now be added quickly with a simple menu, rather than navigating a multi step form.

• Items are now always duplicated when adding to prevent unintended changes appearing across the workspace.

• Items can be reordered by drag and drop.