Alignment

The alignment and placement of components on a screen is a core piece of creating muscle memory for similar interactions existing within a workflow. Each component has the preferred alignment built into its layout and variables, but outside of a component the alignment of components in their relationship to each other is equally important.

Left alignment (default)

• Many components default to using left alignment
• A collection of components within a section will generally use left alignment
• Headings are left aligned within their container
• Body text is left aligned
• Drawer content is left aligned
• Left alignment can be used to anchor UI elements that break outside of a grid or container to other elements on the page

Center alignment

• Center alignment should be used sparingly as it can sometimes interfere with the flow on a left aligned screen
• Standalone icons are center aligned within their containers
• Layouts use center alignment to anchor big content areas within the center of the page and create a centered resting place for the main content

Right alignment

• Sometimes a component has a variation with added UI. When a primary action is left-aligned in relation to what it is associated with, additional UI will often be right-aligned.
• Secondary actions can be right aligned to a container to anchor it within the layout while not calling too much attention to it