In trowsers, a panel can slide into place to help customers add items or information about items to a transaction.

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.

Standard trowser with panel

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.

Panels with expand and collapse controls

Scrolling

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.

Header scrolling appearance

  • Was this Helpful?
  •