Stacks

From a component standpoint, stacks are the foundation of every layout. Most components and snippets will start with a stack. Under the hood, they mimic a flexbox layout.

​

Stack Specific Properties

Stacks have unique properties:

• Axis: Determines the arrangement of items within the stack.

  1. Horizontal: Items are arranged left to right.
  2. Vertical: Items are arranged top to bottom.
  3. Layered: Items are stacked on top of each other.

• Vertical: Controls the vertical alignment of the items within the stack.

  1. Top: Aligns items to the top of the container.
  2. Center: Aligns items vertically in the center of the container.
  3. Bottom: Aligns items to the bottom of the container.
  4. Stretch: Stretches items to fill the vertical space of the container.
  5. Baseline: Aligns items according to their baseline.

• Horizontal: Controls the horizontal alignment of the items within the stack.

  1. Left: Aligns items to the left of the container.
  2. Center: Aligns items horizontally in the center of the container.
  3. Right: Aligns items to the right of the container.
  4. Fill Equally: Distributes items evenly across the container, filling the space equally.
  5. Space Evenly: Distributes items with equal space around them.
  6. Space Around: Distributes items with space around them, with half-size space on the edges.
  7. Space Between: Distributes items with space only between them, with no space at the edges.

• Spacing: Defines the amount of space between items within the stack, measured in pixels by default.

• Wrap: Specifies how items within the stack should behave when they exceed the container’s width.

  1. Don't Wrap: Items remain in a single line and do not wrap onto a new line.
  2. Wrap: Items wrap onto the next line when they exceed the container’s width.
  3. Wrap Reverse: Items wrap onto the previous line in reverse order.

• Scroll: Determines the scrolling behavior of the stack.

  1. None: Disables scrolling within the stack.
  2. Normal: Enables standard scrolling behavior.
  3. Paging: Enables paginated scrolling, allowing users to swipe through pages of items. See “Creating Carousels” below.

• Snap Position: Defines the position at which items snap into place during paging. Only relevant if Scroll is set to Paging.

  1. Start: Items snap to the start of the container.
  2. Center: Items snap to the center of the container.
  3. End: Items snap to the end of the container.

• Auto Paging: Controls whether a carousel’s contents should automatically page between items. Only relevant if Scroll is set to Paging.

  1. Disabled: Auto paging is turned off, and items page via user interaction.
  2. Enabled: Auto paging is turned on and items will automatically page according to the paging delay.

• Paging Delay: The duration to automatically advance the slides. Only relevant if Scroll is set to Paging and Auto Paging is set to Enabled.

​

Creating Carousels

You can create paging carousels using a stack. To make one:

1. Set your stack’s Scroll property to Paging.
2. Ensure Wrap is set to Don't Wrap.
3. Set a size on your stack. For horizontally scrolling carousels, you’ll need a Width set. For vertically paging setups, set a Height.
4. Finally, for any children in your stack, it helps to match their size to the carousel itself. In the example below the carousel has the following size set:

• Width: Set to 100% of the viewport’s width.
• Height: Set to 200 pixels.

Then, the items inside of the carousel are embedded in their own stack set with the same size:

You can test out the carousel in the editor by scrolling your mouse inside of it.