Position terminology
UI elements behave in different ways at each breakpoint range. The position of UI elements, components, and surfaces in the grid are described with the terms below.
Position term | Definition |
Above; below | The y position of an element |
In front of; behind | The z position of an element |
Left; right; center | 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 centered relative to a container or the screen edges |
Sticky | An element that scrolls with the UI and locks at a certain point in the scroll range |
Floating | A fixed element positioned in front of scrolling content |
Leading edge | The edge of a screen or layout that written content begins from. For example, in LTR languages such as English, this is usually the left edge of a screen |
Trailing edge | The edge of a screen or layout where written content ends |
Component adaptation
Component adaptation describes changes in visual presentation (padding, size, layout, or alignment), or switching out one component for another that is better suited to the device size and use case.
Responsive patterns
The arrangement of components in a layout can also adjust with changes in screen sizes. This adaptation occurs either by repositioning the component or concealing/revealing information based on available screen space.