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.
  4. Infinite: Endless scrolling, items clone and repeat themselves once they reach the end.

• 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.

• Infinite Scroll Speed: The amount of pixels per frame that the carousel should advance. Only relevant if Scroll is set to Infinite.

​

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.

The same setup applies if you want to use any type of scrolling, such as an infinite scroll: