Colors
Color code
Color name
Color background class
Color text class
#179AEE
primary
.sai-bg-primary
.sai-text-primary
#0368A8
secondary
.sai-bg-secondary
.sai-text-secondary
#F94D4D
alert
.sai-bg-alert
.sai-text-alert
#ffae00
warning
.sai-bg-warning
.sai-text-warning
#3adb76
success
.sai-bg-success
.sai-text-success
#727272
very-dark-gray
.sai-bg-very-dark-gray
.sai-text-very-dark-gray
#A2A2A2
dark-gray
.sai-bg-dark-gray
.sai-text-dark-gray
#D8D8D8
medium-gray
.sai-bg-medium-gray
.sai-text-medium-gray
#F4F4F4
light-gray
.sai-bg-light-gray
.sai-text-light-gray
#FCFCFC
very-light-gray
.sai-bg-very-light-gray
.sai-text-very-light-gray
#FFC100
sterrk-yellow
.sai-bg-sterrk-yellow
.sai-text-sterrk-yellow
#3A6A80
sterrk-blue
.sai-bg-sterrk-blue
.sai-text-sterrk-blue
#385563
sterrk-gray
.sai-bg-sterrk-gray
.sai-text-sterrk-gray
#2E2E2E
black
.sai-bg-black
.sai-text-black
#FFFFFF
white
.sai-bg-white
.sai-text-white
Buttons
Switches
Panels
Tables
| Simple | |||
|---|---|---|---|
| Col 1 | Col 2 | Col 3 | |
| Row 1 | Value | Value | Value |
| Row 2 | Value | Value | Value |
| Row 3 | Value | Value | Value |
| Row 4 | Value | Value | Value |
| Row 5 | Value | Value | Value |
| Footer | Value | Value | Value |
| Highlights | |||
|---|---|---|---|
| Col 1 | Col 2 | Col 3 | |
| Row 1 | Value highlight | Value background | Value highlight background |
| Row 2 | Value highlight | Value background | Value highlight background |
| Row 3 | Value highlight | Value background | Value highlight background |
| Row 4 | Value highlight | Value background | Value highlight background |
| Row 5 | Value highlight | Value background | Value highlight background |
| Footer | Value highlight | Value background | Value highlight background |
| No borders | |||
|---|---|---|---|
| Col 1 | Col 2 | Col 3 | |
| Row 1 | Value | Value | Value |
| Row 2 | Value | Value | Value |
| Row 3 | Value | Value | Value |
| Row 4 | Value | Value | Value |
| Row 5 | Value | Value | Value |
| Footer | Value | Value | Value |
| No vertical borders | |||
|---|---|---|---|
| Col 1 | Col 2 | Col 3 | |
| Row 1 | Value | Value | Value |
| Row 2 | Value | Value | Value |
| Row 3 | Value | Value | Value |
| Row 4 | Value | Value | Value |
| Row 5 | Value | Value | Value |
| Footer | Value | Value | Value |
| No horizontal borders | |||
|---|---|---|---|
| Col 1 | Col 2 | Col 3 | |
| Row 1 | Value | Value | Value |
| Row 2 | Value | Value | Value |
| Row 3 | Value | Value | Value |
| Row 4 | Value | Value | Value |
| Row 5 | Value | Value | Value |
| Footer | Value | Value | Value |
| DataTable | |||
|---|---|---|---|
| Col 1 | Col 2 | Col 3 | |
| Row 1 | Value | Value | Value |
| Row 2 | Value | Value | Value |
| Row 3 | Value | Value | Value |
| Row 4 | Value | Value | Value |
| Row 5 | Value | Value | Value |
| Row 6 | Value | Value | Value |
| Row 7 | Value | Value | Value |
| Row 8 | Value | Value | Value |
| Row 9 | Value | Value | Value |
| Row 10 | Value | Value | Value |
| Row 11 | Value | Value | Value |
| Row 12 | Value | Value | Value |
| Row 13 | Value | Value | Value |
| Footer | Value | Value | Value |
Input elements
Hexagon overview
Modals
Modal
Content