Vertical list
The vertical list is a view type. It's not added from the element palette, but instead by setting the view type of a view to vertical list. A vertical list displays a list of repeating items in a vertical stack. It uses a single reusable list item template, and is best for longer scrolling screens like task lists or news feeds.
Visual
Content
Type of content
The type of content you want to display in the vertical list.
Data source
The data source that you want to load into the vertical list.
Layout
Gap
Sets the distance between items in the vertical list, as a pixel value.
Padding
Defines the internal spacing between an element’s content and its border in a static pixel value. Padding adds space inside the element, without affecting its position relative to other elements.
Padding is added on the vertical and horizontal axis respectively.
Configure
Separators
Style
None
No separator is shown between items.
Inset
A separator is shown between items, indented from the leading edge.
Full
A separator spans the full width between items.
Width
You can set the width of the separators as a pixel value, or as harline. This is the thinnest line a screen can render, which varies by device — on high-density displays (such as Apple's Retina) it can be thinner than a full pixel. A pixel width of 1 is always exactly one device-independent pixel, which may appear thicker than a hairline on high-density screens.
Color
Sets the color of the separators.
Snapping
Snapping controls how the list settles when the user stops scrolling. Instead of free-scrolling and stopping wherever momentum ends, a snapping list comes to rest at a defined point - on an individual item or on a full page of content. Bubble reads your layout settings (item size, padding, and gaps) and applies the correct native snapping behavior automatically.
Snap mode
None
The default. The list scrolls freely and stops wherever the user's scroll momentum ends.
Item
The list settles on the nearest item after each swipe. Best for card carousels, media rows, and scrollable galleries. Requires a fixed item size (see note below).
Page
Each swipe advances one full screen of content. The list item is sized automatically - its height is set to fill the screen. Best for onboarding walkthroughs, full-bleed galleries, and vertical video-style feeds.
Item snapping requires a fixed item size. Items that fit to their content don't have a known size until they render, so their snap positions can't be calculated in advance. If you select Item while the list item is set to fit to content, the editor displays an error prompting you to set a fixed size. Page mode doesn't have this requirement, since it sizes items to the screen automatically.
Snap alignment
Applies to Item snapping only. Sets where the snapped item comes to rest in the list.
Start
Items line up with the leading edge of the list - the classic carousel look.
Center
The active item stays centered in the viewport. Works well for hero or featured content.
Deceleration rate
Sets how quickly the list settles onto a snap point after a swipe.
Fast
The list stops crisply on the next snap point. Usually the right choice for carousels.
Normal
Keeps the platform's natural scroll momentum - a flick coasts before settling. The longer glide tends to feel better for vertical page-style feeds. Vertical lists default to Normal.
Interaction
Workflows
Shows the workflows connected to the selected element. Click the + symbol to create a new workflow associated with that element. The list of available events differs based on which element is selected.
Shortcut: To quickly add a workflow to a selected element, press Cmd+K on macOS or Ctrl+K on Windows. The shortcut defaults to the most likely event for that element type.
Visibility
Visible on view load
Enable this to make the element visible by default. This checkbox makes the element visible every time the view loads. Change the visibility of the element based on certain conditions in the Conditional section in the property editor or with a show/hide element action in a workflow.
Options
Enable reverse scroll
When enabled, the list scrolls in the opposite direction. New items appear at the bottom and the list starts scrolled to the end.
Transitions
Transitions add animation when a style property changes.
Instead of updating instantly, the element gradually shifts from its previous state to the new one over a defined duration. For example, if you reduce an element’s width, a transition can make it smoothly shrink rather than change size immediately.
Transition styles
ease
Starts slowly, speeds up in the middle, and slows down at the end.
ease-in
Starts slowly and accelerates toward the end.
ease-out
Starts quickly and decelerates toward the end.
ease-in-out
Starts slowly, accelerates in the middle, and slows down again at the end.
linear
Moves at a constant speed from start to finish.
step-start
Jumps immediately to the end state at the start of the transition.
step-end
Remains in the start state and jumps to the end state at the very end of the transition.
Transition duration
Transition duration defines how long the transition animation runs, measured in milliseconds.
Advanced
A unique identifier assigned to the element. This can be used to reference the element in custom code, such as JavaScript or CSS, using document.getElementById() or CSS selectors.
For this property to be visible, you need to enable Expose the option to add an ID attribute to HTML elements in Settings – Advanced options.
Last updated
Was this helpful?