Skip to content
Design System
  • Documentation
  • Prototypes
Branding
  • Voice & tone
  • Logo
  • Farben
  • Typographie
  • Visuelle Elemente
Foundations
  • Usage
  • Global styles
  • Themes
  • Spacing
  • Viewports
  • Colors
  • Typography
  • Core utilities
Layouts
  • Usage
  • Aspect ratio
  • Auto grid
  • Content grid
  • Flex group
  • Flow
  • Multicol
  • Pile
  • Reel
  • Region
  • Repel
  • Sidebar
  • Switcher
  • Wrapper
Patterns
  • Accordion
  • Avatar
  • Avatar Group
  • Book pile
  • Brand shapes
  • Button
  • Calendar Date
  • Callout
  • Card
  • Context Switcher
  • Figure
  • Forms
  • Hero
  • Icon
  • Icon link
  • Image Bento
  • Image Grid
  • List Icon
  • Marquee
  • Modal
  • More Link
  • Pagination
  • Pill
  • Promo Card
  • Prose
  • Section Divider
  • Section Heading
  • Section Illustration
  • Show More
  • Slideout
  • Submenu bar
  • Table
  • Tabs

Reel

A layout that allows for horizontal scrolling of items within a container, with customizable item sizes and spacing.

Configuration #

PropertyDefault valueDescription
--gutter--spacing-s-mThis defines the space between the items.
--reel-item-size--line-length-xsSets the minimum size of items in the reel layout.

Default Reel #

View full screen

Extend to one side #

The reel can be used to create full-width scrollers that align with the grid lines of the content grid layout. To do this, the reel must be nested inside a content grid.

View full screen

Sliders #

This layout can be used to create interactive content sliders. To achieve this, you must add the slider functionality using JavaScript.

View full screen
Theme