Row Layout Pattern - Smoothie Design System

Smoothie

3. Patterns

Row Layout Pattern

Basic Row Layout

3-Column Layout (Start | Center | End)

Left

Center

Right

Layout: Start slot pulls left, center stretches, end pulls right

Common Patterns

Toolbar with Theme Controls

Use case: Theme (flavor) selector and appearance toggle in compact icon-only form

Header with Title and Actions

Back

Page Title

Use case: Navigation header with title and action buttons

Full-Width Toolbar (Start Empty)

Center Content

Action

Layout: Empty start keeps title centered, action on right

Implementation

Basic usage:

<labs-row-layout>
    <div slot="start">...</div>
    <div slot="center">...</div>
    <div slot="end">...</div>
</labs-row-layout>
            

Theme controls example:

<labs-container full-width>
    <labs-row-layout>
        <div slot="start"></div>
        <div slot="center"></div>
        <div slot="end" style="display: flex; gap: 1rem;">
            <labs-theme-button icon-only></labs-theme-button>
            <labs-theme-toggle icon-only></labs-theme-toggle>
        </div>
    </labs-row-layout>
</labs-container>
            

Import: Add `import '/libs/smoothie-design-system/v3.0/src/components/labs-row-layout.js'` to your page script

Slot Behavior

start slot: Left-aligned, no flex growth (flex: 0 0 auto)

center slot: Centered, flexible width (flex: 1 1 auto) — expands to fill available space

end slot: Right-aligned, no flex growth (flex: 0 0 auto)

All slots use internal flexbox with centered alignment for child items.