Layout

flow

Margin-based spacing for mixed content areas. Adds margin-block-start to every sibling element:

@include flow;                    // default --space-stack
@include flow(var(--space-6));    // custom spacing

Parameter	Default	Description
`$space`	`var(--space-stack)`	Space between siblings

Use for: CMS content areas, mixed prose and component regions where flex layout is not appropriate.

Do not use for: pure prose — headings and paragraphs have margin-block-start set by base styles. UI components — use stack instead.

stack

Flex column layout with consistent gap. Use for UI components where elements have no natural margins:

@include stack;                    // default --space-stack
@include stack(var(--space-4));    // custom gap

Parameter	Default	Description
`$space`	`var(--space-stack)`	Gap between children

Use for: cards, forms, fieldsets, nav lists, any vertical UI component.

Do not use for: prose content — headings and paragraphs have natural margins that stack will override.

scroll-container

Overflow scroll container. Use on the parent of any element that may exceed its container:

@include scroll-container;              // horizontal — default
@include scroll-container(y);          // vertical
@include scroll-container(both);       // both axes
@include scroll-container(x, smooth);  // smooth scrolling

Parameter	Values	Default	Description
`$direction`	`x`, `y`, `both`	`x`	Scroll axis
`$behavior`	`auto`, `smooth`	`auto`	Scroll behavior

// responsive table
.table-wrapper {
  @include scroll-container;
}

// scrollable panel
.sidebar {
  @include scroll-container(y);
}