Flow Composition
The flow composition creates consistent vertical spacing between elements. Each direct child gets the same spacing applied.
Small Flow
This flow uses small spacing between elements.
Notice how each paragraph has consistent spacing.
Large Flow
This flow uses large spacing between elements.
The spacing is more generous here.
Extra Large Flow
This flow uses extra large spacing.
Maximum breathing room between elements.
Grid Composition
The grid composition creates responsive grid layouts with consistent gaps. Items automatically wrap and maintain equal spacing.
Small Gap Grid
Card 1
This is a grid item with small gaps.
Card 2
Another grid item with consistent spacing.
Card 3
Grid items automatically wrap to new rows.
Medium Gap Grid
Feature 1
Medium gaps provide more breathing room.
Feature 2
Perfect for feature grids and galleries.
Large Gap Grid
Large Spacing
Maximum space between grid items.
Generous Layout
Ideal for prominent content sections.
2 Column Grid
Column 1 Column 1 Column 1 Column 1 Column 1 Column 1
This is the first column.
Column 2
This is the second column.
Column 2
This is the second column.
Column 2
This is the second column.
Repel Composition
The repel composition pushes elements to opposite ends of a container. Perfect for headers, navigation, and any layout needing space between elements.
Header Example
Card Header
Form Actions
Status Bar
OnlineSwitcher Composition
The switcher composition allows two items to sit side by side until there isn't enough space. When the container becomes too narrow, the items stack vertically.
Primary Content
This is the main content area that takes priority.
Secondary Content
This content sits alongside when space allows.
Title
This could be a page title or heading.
Form Field
Input field with label.
Status
Current status information.
Wrapper Composition
The wrapper composition centers content and applies a maximum width. Perfect for main content areas that shouldn't stretch too wide on large screens.
Centered Content
This content is centered and has a maximum width. It prevents text from becoming too wide to read comfortably on large screens while maintaining good readability.
The wrapper composition is ideal for main content areas, articles, forms, and any content that benefits from controlled width and centering.
Form Example
Card Layout
Card Title
This card is wrapped and centered for optimal reading.