Drag & Drop Patterns [Interfaces]

Note: Looking for more patterns and examples? Check out the SAIL Design System documentation.

Overview

Component patterns offer you an easy way to drag-and-drop common design patterns for your interfaces. Learn from them, or adapt them to fit your interface. Select from the list below to learn more a particular pattern's design or expression.

Search Patterns

Formatting Activity History Pattern

Choice Components Alert Banner Patterns

Formatting Breadcrumbs Pattern

Formatting Call to Action Pattern

Choice Components, Formatting, Conditional Display Cards as Buttons Pattern

Card Choices, Rich Text Cards as Choices Pattern

Choice Components, Images Cards as List Items Patterns

Comments, Looping Comments Patterns

Documents Document List

Grids Drilldown Pattern

Grids, Charts, Reports Drilldown Report Pattern

Choice Components, Cards, Checkboxes, Buttons Dual Picklist Pattern

Rich Text, Events Duration Display

Inputs, Dynamic Links Dynamic Inputs

Timeline, Events Event Timelines

Stamps Form Steps

Grids Grid With Detail

Grids Grid with Selection Pattern

Radio Buttons, Checkboxes, Buttons Inline Survey

Formatting Inline Tags for Side-by-Side Layout Pattern

Formatting KPI Patterns

Looping Leaderboard

Looping Milestone Patterns

Grids, Rich Text More-Less Link

Conditional Display, Formatting, Navigation Navigation Patterns

Stamps Stamp Steps

Formatting, Choice Components, Buttons, Rich Text, Cards Tabs Patterns

Grids, Filters, Process Task Links, Task Reports Task Report Pattern

Formatting Timeline Patterns

Charts, Reports Trend-Over-Time Report

Looping User List Pattern

Charts, Reports, Formatting Year-Over-Year Report