gitlab-org--gitlab-foss/doc/development/ux_guide/surfaces.md

48 lines
1 KiB
Markdown
Raw Normal View History

# Surfaces
## Contents
* [Header](#header)
* [Global menu](#global-menu)
* [Side pane](#side-pane)
* [Content area](#content-area)
---
![Surfaces UX](img/surfaces-ux.png)
## Global menu
This menu is to navigate to pages that contain content global to GitLab.
---
## Header
The header contains 3 main elements: Project switching and searching, user account avatar and settings, and a contextual menu that changes based on the current page.
![Surfaces Header](img/surfaces-header.png)
---
## Side pane
The side pane holds supporting information and meta data for the information in the content area.
---
## Content area
The main content of the page. The content area can include other surfaces.
### Item title bar
The item title bar contains the top level information to identify the item, such as the name, id and status.
![Item title](img/surfaces-contentitemtitle.png)
### Item system information
The system information block contains relevant system controlled information.
![Item system information](img/surfaces-systeminformationblock.png)