Style
Color
Typography
Properties
Utilities
Visual Effects
Elements
Layouts
Components
Article / FeatureNavigationDataCardsMastersRich TextVideo Player
Galleries

Navigations

Approach

We try to follow the principle of non specific class names however with navigation it is a single instance so we can afford to provide unique class names which will be easy to follow, there are some extended classes which allow for various flex layouts as per below.

Center Aligned Menu

Class
Display
Padding
Width
nav-container
flex horizontal, align center, spece between
0.7em 1.2em
100%

Left Aligned Menu

Class
Display
Padding
Width
nav-container
flex horizontal, align center, spece between
0.7em 1.2em
100%

Right Aligned Menu

Class
Display
Padding
Width
nav-container
align-right
grow, flex horizontal, align right
0.7em 1.2em
100%
nav-menu
expand
align-right
grow, flex horizontal, align right
0.7em 1.2em
100%

SAAS Navigation

We try to follow the principle of non specific class names however with navigation it is a single instance so we can afford to provide unique class names which will be easy to follow, there are some extended classes which allow for various flex layouts as per below.
Class
Display
Padding
Width
saas-nav-container
flex vertical, left, top
0
auto
saas-menu-link
stretch
0.5em 0.8em
auto