Layout

Separator dividers and list containers for organizing sequential content. Lists standardize the flex-column + gap pattern used across admin pages.

Separator

Visual divider between content sections. Horizontal by default, vertical inside flex rows.

HORIZONTAL

Section one

Section two

Section three

VERTICAL

Left

Center

Right

List — Gap

Default variant. Flex column with consistent gap between children. Replaces ad-hoc .thing-list classes.

customer-enrichment-v2 Last run: 2 hours ago

order-sync-daily Last run: 6 hours ago

inventory-check Last run: 1 day ago

List — Bordered

Bordered variant with divider lines between items. Used for access lists, settings, and compact data rows.

get_customer_data Fetches customer profile from CRM

ACTIVE

send_notification Sends email or SMS notification

ACTIVE

generate_report Creates PDF or CSV report from data

INACTIVE

ListItem

Flexible row with leading content (name + description) and trailing actions (toggle, badge, button).

Simple content ListItem with just leading text

With toggle Leading content plus a trailing toggle

Interactive row Renders as button with hover and focus states

CollapsibleSection

Progressive disclosure via native details/summary. Caret rotates on open. Optional badge count and action buttons.

Pipeline Configuration

Recent Runs 12

VIEW ALL

Run #1247 PASSED

Run #1246 FAILED

Run #1245 PASSED

OptionGrid

Radio-group selection rendered as a card grid. Keyboard navigable (arrow keys). Compact mode hides descriptions.

PIPELINE TYPE

Sync Real-time data synchronization between systems

Transform Clean, reshape, and enrich data before loading

Extract Pull data from external sources and APIs

Aggregate Combine and summarize data for reporting

selected: sync

TOKEN REFERENCE

Layout components use component tokens from components.css:

--separator-color: var(--color-border)--separator-thickness: var(--border-width-default)--list-gap: var(--space-sm)--list-border: var(--elevation-border)--list-border-radius: var(--radius-md)--list-item-padding-x: var(--space-md)--list-item-padding-y: var(--space-sm)--list-item-gap: var(--space-md)--list-item-bg: var(--color-surface)--list-item-bg-hover: var(--color-surface-secondary)--list-item-divider: var(--elevation-border)--list-item-leading-gap: var(--space-xs)--list-item-trailing-gap: var(--space-xs)