Split Container

Interaction Specs

Interaction Specs: 
1. View Split Container on Hover.

While hovering over a split container space the cursor changes to a resize icon.

3. Access the Container Views.

A user can access the split container by clicking and dragging anywhere along the split between the two adjacent views, or panes, or by clicking and dragging the resize handle located in the middle of the split container space.

4. Resize the panes.

Dragging the resize handle reduces the width/height of one pane and increases the width/height of the other.

Visual Specs

Visual Specs: 

Vertical Splitter

Horizontal Splitter

Pattern Summary

Pattern Summary (Unity): 

Why Use This Pattern

The Split Container pattern gives the user flexibility to change the width or height of two adjacent views, which provides additional work and screen space. It also allows the user to quickly collapse one of two adjacent views. This flexibility enables the use to focus their attention on desired data by manipulating the panes.

What is the Solution

A user can resize panes on a particular page. For example, on the License Keys page, a user could select a folder and then product to view the list of License Keys. Currently, the user can see 10 license keys. The user could drag the border between the License Key pane and Product pane vertically to hide the list of products and show more License Keys on the screen.
  • A user may use the split container by clicking and dragging anywhere along the space between two adjacent views or panes, or by clicking and dragging the resize handle located in the middle of the split container space.
  • Dragging the resize handle reduces the width/height of one pane and increases the width/height of the other. While hovering over a split container space the mouse cursor changes to a resize icon.

Use This Pattern When

To view content in adjacent views. To show the content of a selected group of items, then open in adjacent window the content of one selected item. Should be set up to work well with data content.

Do Not Use This Pattern

For mass editing, nor images.

GUI Kit

GUI Kit contains all Unity Light theme patterns in vector format

Adobe Illustrator Download 2.1 MB
Vector PDF Download 2.7 MB

Updated November 2015