Style Guide
Search…
Headers
The header provides the core information that users need when first viewing the page.

Usage of Headers

Headers are used to communicate what page (tab) a user is on. The header component can be combined with actions like searching, filtering a list, or changing a setting. Depending on the app, the header will be different colors: Consumer App: White Pro App: Blue-Medium

Types of Headers

Anatomy of Primary Headers (header-primary)

Primary Headers are components used on main app pages. Main headers will scroll with the content of the page.
1. Header Label (a-text-h2)
1
a-text-h2:
2
font-family: bold
3
font-size: 24px;
4
font-color: text-black or white
5
6
padding-left: 16px;
7
padding-right: 16px;
8
padding-top: 16px;
Copied!
2. Action Icons Font Awesome (a-icon-line) is used for the action icons. Action icons lead users to other flows and pages or allow users to make decisions on half sheets. They are optional.
1
font: font-awesome
2
font-size: 20px
3
font-weight: light
4
font-color: blue-medium or white
5
6
Icon 1:
7
padding-right: 34px
8
9
Icon 2:
10
padding-right: 16px
11
12
font-awesome codes:
13
[search] - used for search
14
[sliders-v] - used for filtering
15
[cog] - used for settings
16
[calendar-plus] - used for adding to calendar
Copied!

Anatomy of Secondary Headers

Sub-headers are used on subpages or flows that are navigated to from a main tab page. Unlike main headers, sub-headers will stick to the top so users have a way to navigate away from the page.
1. Navigation (a-nav) Helps user navigate away from the page they are currently on. It would either be a back arrow or exit.
1
font awesome: angle-left
2
font-weight: regular
3
font-size: 24px
4
font-color: text-black or white
5
6
max-width: 16px
7
color: text-black
8
9
padding-left: 16px
10
padding-right: 8px
Copied!
2. Header Label (a-text-subheader)
1
a-text-subheader:
2
font-weight: medium
3
font-size: 16px
4
font-color: text-black or white
5
6
padding-left: 8px
7
padding-right: 8px
8
padding-top: 18px
9
padding-bottom: 18px
Copied!
2. Action Icons Font Awesome (a-icon-line) is used for the action icons. Action icons lead users to other flows and pages or allow users to make decisions on half sheets. They are optional.
1
font: font-awesome
2
font-size: 20px
3
font-weight: light
4
font-color: blue-medium or white
5
6
Icon:
7
padding-right: 16px
8
9
font-awesome codes:
10
[search] - used for search
11
[sliders-v] - used for filtering
12
[cog] - used for settings
13
[calendar-plus] - used for adding to calendar
Copied!
4. Divider Line (a-divider-dark) For easy viewing and consumption, subheaders will have divider lines.
1
a-divider-dark:
2
max-width: 343px
3
max-height: 1px
4
color: slate-medium-light
5
6
padding-top: 18px
Copied!

Anatomy of Section Headers

Section Headers are used to differentiate and organize large amounts of content. These headers can stick to the top and get pushed up by the subsequent section header or scroll with content.
Section Header
1. Header Label (a-text-subheader)
1
a-text-subheader:
2
font-weight: medium
3
font-size: 16px
4
font-color: text-black
5
6
padding-left: 16px
7
padding-right: 16px
8
padding-top: 8px
9
padding-bottom: 8px
Copied!
2. Container
1
color: slate-light
2
max-width: 100%
Copied!

Anatomy of Time Subheader

Time Subheaders are used to allow users access the native time picker and to reflect the time chosen. They can be found in pro search experiences.
1. Date & Time (a-text-paragraph) Reflects the time chosen on the native time picker.
1
a-text-paragraph:
2
font-size: 16px
3
font-weight: book
4
font-color: text-black
5
6
padding-left: 16px
7
padding-right: 8px
8
padding-top: 12px
9
padding-bottom: 12px
Copied!
2. Divider Line (a-divider-dark) For easy viewing and consumption, subheaders will have divider lines.
1
a-divider-dark:
2
max-width: 375px
3
max-height: 1px
4
color: slate-medium-light
Copied!

Anatomy of Dropdown Header

Dropdown headers, like Section Headers, organize large amounts of content and can stick or scroll with the page. The only difference is that dropdown headers allow users to expand or hide the content.
1. Label (a-text-h4) Reflects the time chosen on the native time picker.
1
a-text-h4:
2
font-size: 16px
3
font-weight: bold
4
font-color: text-black
5
6
padding-top: 24px
7
padding-bottom: 24px
8
padding-left: 16px
9
padding-right: 8px
Copied!
2. Supporting Text Any supporting copy like count can live here.
1
a-text-paragraph:
2
font-size: 16px
3
font-weight: book
4
font-color: slate-dark
5
6
padding-top: 24px
7
padding-bottom: 24px
8
padding-left: 8px
9
padding-right: 8px
Copied!
3. Caret To indicate state (closed vs open) the caret will change.
1
font: font-awesome (angle-down & angle-up)
2
font-size: 16px
3
font-weight: light
4
font-color: slate-dark
5
6
padding-top: 24px
7
padding-bottom: 24px
8
padding-left: 8px
9
padding-right: 16px
Copied!
4. Container
1
color: off-white
2
3
width: 100% (375px)
4
max-height: 68px
Copied!
5. Divider Line (a-divider-dark) For easy viewing and consumption, dropdown headers will have divider lines.
1
a-divider-light:
2
max-width: 343px
3
max-height: 1px
4
color: slate-medium-light
Copied!