Component behavior

The following guidance describes how components behave, both in the grid and between breakpoints.


Positioning terminology

UI elements behave in different ways at each breakpoint range.

Descriptors

The position of UI elements elements, components, and surfaces in the grid can be described using the following terms: Descriptor Definition Above, below The y...

Read More

The position of UI elements elements, components, and surfaces in the grid can be described using the following terms:

Descriptor

Definition

Above, below

The y position of an element

In front of, behind

The z position of an element

Left, right, centered

The x position of an element

Top, bottom

The y position of an element relative to a container or screen edge

Vertically centered

The x and y position of an element are centered relative to a container or screen edges

Sticky

An element that scrolls with the UI and locks at a certain point in the scroll position

Floating

A fixed element positioned in front of scrolling content


Component width

Component width can remain the same across screen sizes, or it can change depending on the layout. Component width can be either:

  • Fixed
  • Fluid

Because fixed width elements retain their width during layout changes, their placement can change to accommodate new layouts. Their placement can be either:

  • Pushed
  • Overlaid

Fixed

When an element has a fixed width, its width stays the same even across screen size changes.

Read More

When an element has a fixed width, its width stays the same even across screen size changes.

This button component remains fixed against the right margin.

Fluid

When an element has a fluid width, its width expands and contracts as the screen size changes.

Read More

When an element has a fluid width, its width expands and contracts as the screen size changes.

This button fluidly scales within the right two columns.

Don’t.

Don’t use a container on fluid components if it’s too narrow to display elements and padding at smaller widths.

Caution.

Use caution when spanning a fluid component across several columns in a wide screen. Certain components, like buttons, might be overly emphasized on larger screen widths.

Push

When layout and screen size change, a component can be pushed from its original position. Component width remains the same, but its position changes horizontally,...

Read More

When layout and screen size change, a component can be pushed from its original position. Component width remains the same, but its position changes horizontally, moving left or right. When this occurs, it may be partially occluded by a screen’s edge if pushed off-screen.

The content region is pushed off-screen by the navigation drawer.

Overlaid

When a UI changes, a component can be overlaid by other elements that occlude it. When a component is overlaid, its width and position remain...

Read More

When a UI changes, a component can be overlaid by other elements that occlude it. When a component is overlaid, its width and position remain the same.

The content UI region is covered by the navigational UI region.


Responsive patterns

Components can adapt their dimensions based on screen size and device type, using the following the following patterns. These dimension adaptations can include:

  • Using different components that fit the space better
  • Altering the visibility of components to accommodate smaller spaces
  • Changing to input methods

As screen space increases, the following responsive patterns may be applied.

Reveal

Parts of the UI hidden by smaller screens can be revealed when additional space becomes available at a designated breakpoint.

Read More

Parts of the UI hidden by smaller screens can be revealed when additional space becomes available at a designated breakpoint.

Elements, such as side navigation, can become visible when screen size increases.

A simple UI may reveal more robust or complex options.

Content that only appears after tapping on a small screen can be revealed by default when more space is available.

Transform

A component can transform from one format to another at a designated breakpoint.

Read More

A component can transform from one format to another at a designated breakpoint.

Side navigation can transform into tabs on a larger screen.

A list can transform into an image list on a larger screen.

Menu items can transform into icons in a toolbar on a larger screen.

Divide

UIs with multiple layers can display all of those layers at once when more screen space is available. UI elements are divided across this newly...

Read More

UIs with multiple layers can display all of those layers at once when more screen space is available. UI elements are divided across this newly available space.

Side navigation, list content, and detailed content divide to fill a single view on a larger screen.

Tabbed sibling content is divided within the same view on a larger screen.

Reflow

A UI may change its layout to reflow across newly available space.

Read More

A UI may change its layout to reflow across newly available space.

Elements from a single-column format can reflow to fill the content area in various combinations on a larger screen.

Horizontal tabs can reflow into a vertical list on a larger screen.

Elements can reflow within a component based on a new screen ratio or device orientation.

Expand

The UI can expand across more space.

Read More

The UI can expand across more space.

Cards can expand to fill a new and larger space.

Dialogs can expand proportionally with content or in specific increments.

Position

The position of UI components can change to more appropriate locations.

Read More

The position of UI components can change to more appropriate locations.

A bottom sheet on a small screen can reposition itself as a menu on a larger screen.

A floating action button (FAB) can move to a more visible location relative to other UI elements on a larger screen.