When to use panels
We show customers a panel when they need to add items or information about items to a transaction.
What panels look like
The panels sits on the same level as the trowser and can contain complementary actions or workflows.
Panels are part of the page. They don’t cover up navigation or have their own sticky footer.
Panels in trowser are 288 px wide.
Multiple flexible elements in a panel header section allow for different configurations. The header section color background can be either white or gray07 #ECEEF1.
Mobile web responsive appearance
On mobile devices, we don’t show a trowser and panel side by side. On phones, the panel covers the entire screen width and height of the device. There’s no expand and collapse control. And the panel title and back control are optional.
Behavior: expanding, collapsing, and scrolling
Panels open automatically when there are items in the panel pertaining to the current task. The panel slides in from the side of the page and pushes the page content over.
The animation should use the same speed and bounce as the trowser (but the panel slides in from the right).
Expand and collapse control
Customers can show or hide the panel using the provided expand and collapse control.
If there’s enough content, customers can scroll through a panel vertically and independently of the rest of the page content and user interface. Panels don’t scroll horizontally.
Panel headers retain a fixed position at the top. Content scrolls underneath, and a shadow is added to color matched headers.
Content scrolls below the trowser footer with a 56 px gradient dissolve above.