B3 Swatches Article

Layouts Overview

Choose between wrap, grid, scroll, pill, and slider layouts, then refine selector style, shape, and spacing.

Introduction

Layout controls how swatches occupy space before color, typography, or motion matter. Start with the browsing pattern you want, then adjust selector style, shape, and padding from there.

Layout modes

Each layout mode prioritizes a different kind of browsing behavior.

Selector and shape behavior

Selector style, shape, and width controls depend on the layout you chose.

Choose a layout

Pick the browsing pattern first, then fine-tune padding and presentation.