Style guide

Typography

Utility classes available for text formatting

Font definition

test1 test2
preview Name Value Utility class CSS variable

Sample text

 2xs 0.625rem eui-u-font-2xs --eicui-base-font-2xs

Sample text

 xs 0.75rem eui-u-font-xs --eicui-base-font-xs

Sample text

 s 0.875rem eui-u-font-s --eicui-base-font-s

Sample text

 m 1rem eui-u-font-m --eicui-base-font-m

Sample text

 l 1.125rem eui-u-font-l --eicui-base-font-l

Sample text

 xl 1.25rem eui-u-font-xl --eicui-base-font-xl

Sample text

 2xl 1.5rem eui-u-font-2xl --eicui-base-font-2xl

Sample text

 3xl 1.75rem eui-u-font-3xl --eicui-base-font-3xl

Sample text

 4xl 2rem eui-u-font-4xl --eicui-base-font-4xl

Sample text

 5xl 2.25rem eui-u-font-5xl --eicui-base-font-5xl

Sample text

 6xl 2.675rem eui-u-font-6xl --eicui-base-font-6xl

Grid system

You can organize your contents in columns. The amount of columns to be used is defined through a class entry in the contents container.

Note that when using this grid system, the app will track interface resizing an adapt the column in order to keep a fluid display.

2 columns (class="cols-2")
3 columns (class="cols-3")
4 columns (class="cols-4")
5 columns (class="cols-5")
6 columns (class="cols-6")
8 columns (class="cols-8")

Color system

Normalized color coding

Severity

EUI provides a reduced set of colors providing a semantic information to the user.

Meaning Color Attribute* css variable name
Primary primary --eicui-base-color-primary-100
Secondary (used as default) --eicui-base-color-secondary-100
Success success --eicui-base-color-success-100
Warning warning --eicui-base-color-warning-100
Danger/failure danger --eicui-base-color-danger-100
Info info --eicui-base-color-info-100
Accent accent --eicui-base-color-accent-100

* See components tagged with severity, indicating they support severity color system

Headings

Styles available for title formatting

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

Icons

Set of UI icons