Briefcase

# Element Guidelines

# Focus Header

# Portal Header

Image showing the portal header at different screen widths

The portal header is designed to be used with the Portal left-panel navigation.

Controls and an optional product name can be added to the main portion of the header.

It incorporates a show/ hide button into the logo area which will expand and collapse the menu. At smaller screen sizes this will turn into a menu button.

# Header with menu

# Left panel navigation

# Top navigation

# Horizontal tabs

# Vertical tabs

# Buttons

# Button sizes

# Primary button

# Highlight button

# Outline button

# Destructive button

# Controls

# Tab bar

# Horizontal nav

# Vertical nav

# Page headers

# Section title

# Right button area

# Bottom button area

# Back button

# Section headers

# Right button area

# Select menu

# Sub-section header

# Leading icon

# Trailing icon

# Filter bar

# Pagination

# Tables

# Range select

# Data bar

# Interactive

# Graphs

# Tooltips

# Forms

# Calendars

# Month select

# Range select

# Modals

# Close text

# Popovers

# Close text

# Dialogs

# Dismissable

# Warning

# Destructive

← Resources and Case Studies →