WISE App

The wrapper component for all WISE applications.

Purpose

This internal component provides the main layout, navigation, and core elements that should exist among all new ERP applications.

WISE App Anatomy
  1. Breadcrumb
  2. Application Title
  3. Application Routing (third tier navigation)

Usage

When to use
When not to use

Video Recap

Best Practice

Example One

Application routing is only used if there are third tier navigation items. If there are none, the user will only see the application title upon entering an application.

Example Two

Title and routing (if used) remain throughout all levels of an application to enable the user to quickly navigate and to know which application they are using at all times.

Example Three

If a user can move into deeper levels past a first-level view, use breadcrumbs to enable them to track and navigate through page hierarchy. See Breadcrumb documentation for additional information.

Example Four

Winsupply Standards

Testing Demo
Test
testing content here testing content here
Right Aligned Numbers
$21,344.00 |
Numbers in a table like cost, quantity and price are right aligned inside of a table.
Date Format
00/00/2024
Across all domains, the date format should be listed in this way to ensure consistency.
Left Arrow
Right Arrow

Incorrect Usage

Example One

Example Two

Example Three

Example Four

Variants

Application title with breadcrumbs (no application routing)

Application title with application routing (no breadcrumbs)

Application title only

Sizing

Padding: 16px, 32px, 32px, Margin between application title and routing: 16px, Margin between breadcrumb/title/routing and application content: 24px

Application title: h3/bold-700/line-height-1.5 (24.5px/1.531rem)

Applications In Use

No items found.