Ripple
patterns
We use specific layout structures, containers, and patterns to group information and create consistent experiences in our products.
The following are foundational page layouts. We build on these layouts by adding containers and patterns.
Cards, tables, side panels, flyouts, dialogs, modals, full page panels, and snackbars.
Tabs, toolbars, forms.
There are two main immersive layout types, one to display extensive details about a specific product area, and the other to collect complex, multi-faceted information from users through multiple tasks and actions. Immersives may or may not have a unique URL.
Cards, tables, side panels, flyouts, dialogs, modals, and snackbars.
Tabs, toolbars, forms, steppers.
These views are launched from primary layouts and should focus the user on specific information or as a launch point to complete tasks.
Other pages from this view should relate to the main immersive tasks.
These views can be broken down further by using tabs, cards, side panels, modals, and flyouts.
Dark immersives can go more than one level, but it is not reccomended to go more than two levels.
Primary actions could be “Done” or “Close” to return to the previous screen. Always include a back option next to the title.
Use light immersives to complete single tasks. Dark immersives can be used to launch light immersives.
These views can be launched from the primary layout or dark immersive layouts.
Other pages from this view should relate to the main immersive tasks.
Breadcrumbs can be used to indicate where this view came from, but is not required.
Primary actions on the right are required to complete the task and close the view. Also use the close “x”, rather than a back arrow, on the left to close and return to the previous view.
These views are to complete singular tasks and do not navigate to other views.
The following are layout containers that present groups of information, tasks, or actions.
They may display information using a combination of text and data visualization, and use buttons and links for additional information and actions. Cards are variable in width and height. Multiple cards may appear in a content area as a stacked list, or side-by-side in a grid layout.
These actions can open side panels, flyouts, dialogs, modals, full page immersives, and snackbars.
Tabs, forms, and steppers.
Only table containers can be used within cards.
These actions can open side panels, flyouts, dialogs, modals, full page immersives, and snackbars.
Toolbars.
As the available screen width decreases, a side panel at a fixed width will cover an increasingly larger area while leaving less space available for the content area. We recommend either having the information in the panel below the content area or utilizing a flyout on smaller screens.
Open the side panel from the left if it includes navigational actions that affect the main content. Other types of actions within side panels can either be on the left or right depending on what makes sense for your use case.
Only table containers can be used within side panels.
Tabs and forms.
Consider using flyouts instead to focus the user’s attention.
Flyouts can be multiple sizes depending on the content, and become full screen on smaller devices. All flyouts have a close option in the top right, unless they are full width in which case the close option is on the top left. They can have action buttons in the bottom right but it is not required. Always include a title. Subtitles can be above and below the title to help provide more context but are optional.
Only table containers can be used within side panels.
Forms, breadcrumbs, and pagination.
Consider using white immersive views to provide more information in a full page.
The primary action can open an additional modal, but the first modal’s task must be completed and closed first.
The primary action closes the modal and completes the task.
Forms, toolbar, steppers, and pagination.
Consider using a flyout or white immersive view to provide more room for information.
Flyouts and side panels cannot be triggered to open from a modal.
If more than one action can be taken, consider breaking up the workflow into individual modals or use another pattern.
Tabs transform into a dropdown when horizontal space becomes less than the width of the tabs.
If you have too many tabs to fit in one view, consider simplifying or using another pattern.
Primary pages, immersive layouts, flyouts, and side panels.
Steppers can be horizontal or vertical. Transform a horizontal stepper into a vertical one on smaller screens.
There is no set limit to the amount of steps, but it is recommended to use the least amount of steps that make most sense for your use case.
Allow users to tab through steps so they can preview content within each step unless the step is dependent on information from the previous step. Trigger error messages if they move past a required step without completing all the required information.
Include buttons to move forward (and backward if applicable) through steps. These buttons can be above within an immersive header, or below the form. Do whatever makes sense for your use case and layout.
Immersive layouts, flyouts, side panels, and modals.
Steppers should only be used during the completion of a single task. Once the user is complete with the task, use another pattern to display the information.
If the breadcrumb becomes long and has at least three levels listed, you can use an ellipses to collapse the middle hierarchy. Keep the first and current level visible. Selecting the ellipses will expand the breadcrumb to display the entire breadcrumb.
Primary layouts, Immersive layouts, side panels, and flyouts.
Primary layouts, Immersive layouts, tables, side panels, modals, and flyouts.
Once the user selects and holds the icon or container, the cursor should change to a grab cursor.
Highlight the area using a different color than the background.
If there are multiple actions within the container being dragged, you may want to limit the click and drag area to just the icon to avoid interfering interactions.
Do have drag and drop areas within other draggable elements. They should be limited to single areas where the same type of element is interacted with.
