doc/development/ux_guide/surfaces.md


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

# 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)