Default app colors.

Each color can has up to 6 different variants. Possible variants are: lightest lighter light base dark darker darkest

The color variables names (e.g. primary, accent, success etc) is used as theming classes so each time you want to get something with a proper styling just add one of those classes and pray that you will get what you are looking for >:)

@color: #171A1E @name: primary-base-color
@color: #FFFFFF @name: secondary-base-color
@color: #A62122 @name: accent-base-color
@color: #66CC99 @name: success-base-color
@color: #FEFFF1 @name: warning-base-color
@color: #CC3333 @name: negative-base-color

File root.scss contains rules that allow you to design typography elements, spacing rules, buttons, and form elements. You can add variables for sharing throught components, like --header-height.

Neutrals

Neutral colors primarily used for text, backgrounds, and borders.

@color: #171A1E @name: neutral-darkest-color
@color: #232529 @name: neutral-darker-color
@color: #38393D @name: neutral-dark-color
@color: #4D4E50 @name: neutral-mediumdark-color
@color: #5F6063 @name: neutral-mediumlight-color
@color: #A9A9AA @name: neutral-light-color
@color: #EFF0F0 @name: neutral-lighter-color
@color: #F7F7F7 @name: neutral-lightest-color

H1 — Roboto Light 4rem

H2 — Roboto Regular 3rem

H3 — Roboto Regular 2.25rem

H4 — Roboto Regular 2rem

H5 — Roboto Regular 1.5rem

Paragraph — Roboto Regular 1.5rem

When more control is needed, check out the textual utility classes like .u-h1, u-h2, etc.

  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5 class="u-h5">Heading 5</h5>
  <p>Paragraph text</p>

Grid system

Use .eui-grid class to define grid container.

Our grid has 12 columns of equal width and a gap of 16 pixels. Use .col-N, where N is the number of columns an element should take. You can set offset to the item in the grid by adding the .start-N class, where N — is the column where the element should begin.

<div class="demo-grid">
  <div class="eui-grid">
    <div class="col-4"></div>
    <div class="col-4"></div>
    <div class="col-4"></div>
  </div>

  <div class="eui-grid">
    <div class="col-1"></div>
    <div class="col-1"></div>
    <div class="col-1"></div>
    <div class="col-1"></div>
    <div class="col-1"></div>
    <div class="col-1"></div>
    <div class="col-1"></div>
    <div class="col-1"></div>
    <div class="col-1"></div>
    <div class="col-1"></div>
    <div class="col-1"></div>
    <div class="col-1"></div>
  </div>

  <div class="eui-grid">
    <div class="col-2 start-2"></div>
    <div class="col-1 start-5"></div>
    <div class="col-2"></div>
    <div class="col-1"></div>
    <div class="col-2 start-11"></div>
  </div>
</div>

Button styles can be applied to any element. Typically you"ll want to use either a <button> or an <a> element:

<button type="button" class="eui-button default primary">Click</button>
<button type="button" class="eui-button default primary disabled">Click</button>
<button type="button" class="eui-button default success">Click</button>
<button type="button" class="eui-button default warning">Click</button>
<button type="button" class="eui-button default secondary">Click</button>
<a class="eui-button default accent" href="javascript:;">Some Page</a>
<a class="eui-button default as-link" href="javascript:;">Link</a>

Button with only icon

Just add .has-only-icon class to the .eui-button.

  <a class="eui-button default accent has-only-icon" href="javascript:;">
    <i class="ni ni-reload"></i>
  </a>

Button with loading spinner

Class .is-loading replaces text with animation.

  <button type="button" class="eui-button default accent is-loading">
    Loading
  </button>
  <button type="button" class="eui-button outline accent is-loading">
    Loading
  </button>

Sizes

Larger or smaller buttons? Add .large or .small for additional sizes.

<a class="eui-button default large accent has-only-icon" href="javascript:;">
  <i class="ni ni-cog"></i>
</a>
<a class="eui-button default large success" href="javascript:;">
  <i class="ni ni-zoom"></i>
  Large button
</a>

<a class="eui-button default small accent has-only-icon" href="javascript:;">
  <i class="ni ni-cog"></i>
</a>
<a class="eui-button default small success has-icon" href="javascript:;">
  <i class="ni ni-zoom"></i>
  Small Button
</a>

Button styles can be applied to any element. Typically you"ll want to use either a <button> or an <a> element:

<button type="button" class="eui-button outline primary">Click</button>
<button type="button" class="eui-button outline primary disabled">Click</button>
<button type="button" class="eui-button outline success">Click</button>
<button type="button" class="eui-button outline warning">Click</button>
<button type="button" class="eui-button outline secondary">Click</button>
<a class="eui-button outline accent" href="javascript:;">Some Page</a>

Icon buttons styles can be applied to any element. Typically you"ll want to use either a <button> or an <a> element:

<button type="button" class="eui-icon-button">
  <i class="ni ni-trash"></i>
</button>
<a class="eui-icon-button disabled" href="javascript:;" target="blank">
  <i class="ni ni-trash"></i>
</a>

Wrap a series of buttons in .eui-button-group. Each button has a gap equal to the variable --grid-line-margin, which has a default value of 2rem.

<div class="eui-button-group">
  <a class="eui-button default success" href="javascript:;" target="blank">Tic</a>
  <a class="eui-button default primary" href="javascript:;" target="blank">Tac</a>
  <a class="eui-button default accent" href="javascript:;" target="blank">Toe</a>
</div>

Gapless

If you want to remove the space between the buttons, add the .gapless modifier on the buttons container elements.

<div class="eui-button-group gapless demo-group">
  <a class="eui-button outline primary" href="javascript:;" target="blank">Tic</a>
  <a class="eui-button default primary" href="javascript:;" target="blank">Tac</a>
  <a class="eui-button outline primary" href="javascript:;" target="blank">Toe</a>
</div>
<div class="eui-button-group gapless demo-group">
  <button type="button" class="eui-button outline has-icon primary large">
    <i class="ni ni-cog"></i>
  </button>
  <button type="button" class="eui-button outline has-icon primary large">
    <i class="ni ni-zoom"></i>
  </button>
  <button type="button" class="eui-button outline has-icon primary large">
    <i class="ni ni-reload"></i>
  </button>
</div>

The modal structure:

• .eui-dialog

  • button.dialog-close

  • .dialog-title

  • .dialog-body

  • .dialog-footer

All elements are optional.

<div class="eui-dialog medium">
  <button class="dialog-close">
    <i class="ni ni-close"></i>
  </button>
  <div class="dialog-title u-h3">
    No title no talk
  </div>
  <div class="dialog-body">
    <span style="margin: auto">Let me go, I have a right to call my avocado!</span>
  </div>
  <div class="dialog-footer eui-button-group gapless" style="flex-direction: column;">
    <a class="eui-button default accent">Yarrr!</a>
  </div>
</div>

The modal structure:

• .eui-dialog

  • button.dialog-close

  • .dialog-title

  • .dialog-body

    • .dialog-footer

<div class="eui-dialog medium">
  <button class="dialog-close">
    <i class="ni ni-close"></i>
  </button>
  <div class="dialog-title u-h3">
      Can I call you Innokentiy?
  </div>
  <form class="dialog-body">
    <span style="margin-bottom: 4rem">You have already spent the tip I gave you yesterday?</span>
    <div class="eui-form-group">
      <div class="eui-counter-control large">
        <button type="button"><i class="ni ni-arrow-left"></i></button>
        <input type="text" value="42">
        <button type="button"><i class="ni ni-arrow-right"></i></button>
      </div>
    </div>
    <div class="dialog-footer eui-button-group gapless" style="flex-direction: column;">
      <a class="eui-button default accent">Yarrr!</a>
      <a class="eui-button default as-link">Cancel</a>
    </div>
  </form>
</div>

Dialog with tabs

<div class="eui-dialog medium">
  <button class="dialog-close">
    <i class="ni ni-close"></i>
  </button>
  <div class="dialog-title">
    <nav class="eui-tabs is-full-width">
      <a href="javascript:;" class="tab-item is-active">
        <span class="tab-label">Cut</span>
      </a>
      <a href="javascript:;" class="tab-item">
        <span class="tab-label">Bigger, Longer & Uncut</span>
      </a>
    </nav>
  </div>
  <form class="dialog-body">
    <div class="eui-form-group u-text-left">
      <label class="eui-label" for="name">
        Name:
      </label>
      <div class="eui-form-control">
        <div class="eui-form-control-input">
          <input type="text" placeholder="Name">
        </div>
      </div>
    </div>
    <div class="eui-form-group u-text-left">
      <label class="eui-label" for="name">
        Name:
      </label>
      <div class="eui-form-control">
        <div class="eui-form-control-input">
          <input type="text" placeholder="Name">
        </div>
      </div>
    </div>
  </form>
  <div class="dialog-footer eui-button-group gapless" style="flex-direction: column;">
    <a class="eui-button default accent">Yarrr!</a>
    <a class="eui-button default as-link">Cancel</a>
  </div>
</div>

Class .eui-filters could be used to wrap .eui-filters-group or .eui-filters-item. If the filter item need to be grouped, just wrap them in .eui-filters-group. This operation will change gap between elements.

<div class="demo-filters">
  <div class="eui-filters">
    <div class="eui-filters-group">
      <div class="eui-filters-item">
        <div class="eui-form-control">
          <div class="eui-form-control-input">
            <input type="text" placeholder="Filter control">
          </div>
        </div>
      </div>
    </div>
    <div class="eui-filters-group">
      <div class="eui-filters-item">
        <div class="eui-form-control">
          <div class="eui-form-control-input">
            <input type="text" placeholder="Filter control">
          </div>
        </div>
      </div>
      <div class="eui-filters-item">
        <div class="eui-form-control">
          <div class="eui-form-control-input">
            <input type="text" placeholder="Filter control">
          </div>
        </div>
      </div>
    </div>
    <div class="eui-filters-item right">
      <button type="button" class="eui-button default accent">button</button>
    </div>
  </div>
  <div class="eui-filters">
    <div class="eui-filters-item right">
        <div class="eui-form-control has-icon-left">
          <div class="eui-form-control-input">
            <input type="search" placeholder="search">
            <i class="ni ni-zoom"></i>
          </div>
        </div>
    </div>
  </div>
  <div class="eui-table medium">
    <div class="table-header-row">
      <div class="table-header-cell align-center col-1">
        <div class="eui-checkbox">
          <input type="checkbox">
        </div>
      </div>
      <div class="table-header-cell col-3"><span>First</span></div>
      <div class="table-header-cell col-5"><span>Second</span></div>
      <div class="table-header-cell col-2"><span>dd/mm/Y</span></div>
      <div class="table-header-cell align-center col-4"><span>Input</span></div>
    </div>
    <div class="table-row">
      <div class="table-cell align-center col-1">
        <div class="eui-checkbox">
          <input type="checkbox">
        </div>
      </div>
      <div class="table-cell col-3"><span>First column content</span></div>
      <div class="table-cell col-5"><span>Second column content</span></div>
      <div class="table-cell col-2"><span>09/01/2019</span></div>
      <div class="table-cell col-4">
        <div class="eui-form-group">
          <div class="eui-form-control">
            <div class="eui-form-control-input">
              <input type="text" placeholder="input in the table">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Form control with label

Place one add-on on left or right side of an input. For text label use attribute data-left-addon or data-right-addon.

  <div class="eui-fieldset horizontal">
    <div class="eui-form-group">
      <div class="eui-form-control">
        <div class="eui-form-control-input" data-left-addon="USD">
          <input type="number" value="100">
        </div>
        <span class="eui-error">Error message</span>
      </div>
    </div>
    <div class="eui-form-group">
      <div class="eui-form-control">
        <div class="eui-form-control-input" data-right-addon="DDOS &#11097;">
          <input type="text" value="http://google.com">
        </div>
        <span class="eui-error">Error message</span>
      </div>
    </div>
  </div>

Form control with icon

If you want to add an icon to the input, add the class ".has-icon-left" or ".has-icon-right".

    <div class="eui-fieldset horizontal">
      <div class="eui-form-group">
        <div class="eui-form-control has-icon-left">
          <div class="eui-form-control-input">
            <i class="ni ni-reload"></i>
            <input type="password" value="Wookie">
          </div>
          <span class="eui-error">Error message</span>
        </div>
      </div>
      <div class="eui-form-group">
        <div class="eui-form-control has-icon-right">
          <div class="eui-form-control-input">
            <i class="ni ni-cog"></i>
            <input type="password" value="Wookie">
          </div>
          <span class="eui-error">Error message</span>
        </div>
      </div>
    </div>

Form control sizes

Large controls? Add .large for additional size.

  <div class="eui-fieldset horizontal">

    <div class="eui-form-group">
      <div class="eui-form-control large">
        <div class="eui-form-control-input" data-left-addon="left">
          <input type="text" placeholder="data-left-addon">
        </div>
        <span class="eui-error">Error message</span>
      </div>
    </div>

    <div class="eui-form-group">
      <div class="eui-form-control large">
        <div class="eui-form-control-input" data-right-addon="right">
          <input type="text" placeholder="data-right-addon">
        </div>
        <span class="eui-error">Error message</span>
      </div>
    </div>

    <div class="eui-form-group">
      <div class="eui-form-control large has-icon-right">
        <div class="eui-form-control-input">
          <i class="ni ni-cog"></i>
          <input type="password" value="Wookie">
        </div>
        <span class="eui-error">Error message</span>
      </div>
    </div>

  </div>

Enter a number with counter control. Just add .eui-counter-control class. There are two sizes available to a counter control. By default, the size is 32px high and 80px wide. The additional size are large which means 48px high and 256px wide.

  <div class="eui-counter-control">
    <button type="button"><i class="ni ni-arrow-left"></i></button>
    <input type="text" value="42">
    <button type="button"><i class="ni ni-arrow-right"></i></button>
  </div>
  <br>
  <div class="eui-counter-control large">
    <button type="button"><i class="ni ni-arrow-left"></i></button>
    <input type="text" value="90">
    <button type="button"><i class="ni ni-arrow-right"></i></button>
  </div>

The select component represents a control that provides a menu of options.

<div class="eui-select-control">
  <select name="choice" class="eui-select">
    <option value="first">First Value</option>
    <option value="second">Second Value</option>
    <option value="third">Third Value</option>
  </select>
</div>

Class .eui-fieldset could be used to wrap .eui-form-group.

The following form elements classes are supported:

.eui-form-control (such as input, select etc.)
.eui-label
.eui-hint
.eui-error

Only .eui-form-control is a required element. The remaining classes are additional and can be used either individually or all together. Element with class .eui-form-control and additional elements should be wrapped in a .eui-form-group container, to keep the spacing consistent.

  <div class="eui-grid">
    <div class="eui-fieldset col-6 start-4 ">
      <div class="eui-form-group eui-grid">
        <label class="eui-label col-6" for="name">
        <span>Name:</span>
      <span class="eui-hint">Hint text</span>
      </label>
        <div class="eui-form-control col-6">
          <div class="eui-form-control-input">
            <input type="text" placeholder="Name">
          </div>
          <span class="eui-error">Error message</span>
        </div>
      </div>
      <div class="eui-form-group  eui-grid">
        <label class="eui-label col-6" for="name">
        Name:
      <span class="eui-hint">Long hint text with many latters</span>
      </label>
        <div class="eui-form-control col-6">
          <div class="eui-form-control-input">
            <input type="text" placeholder="Name">
          </div>
          <span class="eui-error">Error message</span>
        </div>
      </div>
      <div class="eui-form-group  eui-grid">
        <label class="eui-label col-6" for="name">
        Name:
      <span class="eui-hint">Hint text</span>
      </label>
        <div class="eui-form-control col-6">
          <div class="eui-form-control-input">
            <input type="text" placeholder="Name">
          </div>
          <span class="eui-error">Error message</span>
        </div>
      </div>
    </div>
</div>

Horizontal

If you want to place groups of form elements horizontally, add class .horizontal to the .eui-fieldset.

  <form action="#">
    <div class="eui-fieldset horizontal">
      <div class="eui-form-group horizontal">
        <div class="eui-form-control">
          <div class="eui-form-control-input">
            <input type="name" value="Chris">
          </div>
          <span class="eui-error">Error message</span>
        </div>
      </div>
      <div class="eui-form-group horizontal">
        <div class="eui-form-control">
          <div class="eui-form-control-input">
            <input type="name" value="Chris">
          </div>
          <span class="eui-error">Error message</span>
        </div>
      </div>
    </div>
  </form>

The .eui-checkbox class is a simple wrapper around the <input type="checkbox"> HTML element.

<div class="eui-checkbox">
  <input type="checkbox">
  <label>It already was <a href="#">like this</a> when I came!</label>
</div>
<div class="eui-checkbox" disabled>
  <input type="checkbox" disabled>
  <label>I do not need this, talk me out of it</label>
</div>

The .eui-radio class is a simple wrapper around the <input type="radio"> HTML element.

<div class="eui-radio">
  <input name="radio-group" type="radio">
  <label>Speak softer, I cannot understand you anyway</label>
</div>
<div class="eui-radio">
  <input name="radio-group" type="radio">
  <label>I can not eat mushrooms — I"ve promised them</label>
</div>
<div class="eui-radio" disabled>
  <input name="radio-group" type="radio" disabled>
  <label>Sorry, I do not speak barbarian</label>
</div>

The .eui-color-palette is container for one or several stylized <input type = "radio">. Limit the width of the container if you want to display several rows. Set color to input by add attribute style with --color value.

<div class="eui-color-palette" style="width:96px">
  <input name="radio-group" type="radio" style="--color:crimson" checked>
  <input name="radio-group" type="radio" style="--color:red">
  <input name="radio-group" type="radio" style="--color:orange">
  <input name="radio-group" type="radio" style="--color:yellow">
  <input name="radio-group" type="radio" style="--color:green">
  <input name="radio-group" type="radio" style="--color:skyblue">
  <input name="radio-group" type="radio" style="--color:blue">
  <input name="radio-group" type="radio" style="--color:purple">
</div>

Use the .eui-pill class to make round labeling component.

Using the contextual .eui-pill classes on an a element, or button element quickly provide actionable pills with hover states.

<div class="eui-pill">
  <i class="ni ni-zoom"></i>
</div>

<a href="" class="eui-pill">A</a>

<button class="eui-pill">B</button>

Grouped pills

Add .eui-shifted-pills for wrap a few pills with a shift relative to each other.

<div class="eui-shifted-pills">
  <div class="eui-pill">P</div>
  <div class="eui-pill">I</div>
  <div class="eui-pill">L</div>
  <div class="eui-pill">L</div>
  <div class="eui-pill">S</div>
  <a href="" class="eui-pill">
    <i class="ni ni-settings-fill"></i>
  </a>
</div>

A Popover is a element that hovers over its parent window to provide extra information or operations. It can contain various other element. Comparing with Tooltip, besides information Popover can also provide action elements like links and buttons. Class eui-popover defines visual styles: background, box-shadow etc. Text elements in the popover has white-space: pre declaration. It mean: sequences of white space are preserved. Lines are only broken at newline characters in the source and at
elements (MDN).

<div class="eui-popover">
  <div class="popover-body">
    Default popover!
  </div>
</div>

For an additional markup, you can use our Grid Layout.

<div class="eui-popover">
  <div class="eui-grid popover-body">
    <div class="col-12">
      <div class="popover-title u-h4">Chocolate with foil</div>
    </div>
    <div class="popover-label col-4">Cacao seeds</div>
    <div class="col-8 popover-text">74%</div>
    <div class="popover-label col-4">Aluminium thickness (mm)</div>
    <div class="col-8 popover-text">0.040</div>
    <div class="popover-label col-4">And another shit</div>
    <div class="col-8 popover-text">Can you chew this for me?</div>
  </div>
</div>

Used to build tables as a more flexible replacement tag <table>.

Class eui-table defines visual styles:

--header-color header text color

--header-background-color header background color

--border-color border cell color

And also the structure of the table:

--grid-line-margin Defines cell padding. Default 2rem.

--grid-template-columns Defines the template for the columns. Default repeat(auto-fill, minmax(calc(var(--grid-line-margin) * 2 + 2rem), 1fr))

Examples:

• --grid-template-columns: 64px repeat(4, 1fr);

<div class="eui-table xsmall" style="--grid-template-columns: 64px repeat(4, 1fr);">
  <div class="table-header-row">
    <div class="table-header-cell align-center">
      <div class="eui-checkbox">
        <input type="checkbox">
      </div>
    </div>
    <div class="table-header-cell"><span>Column</span></div>
    <div class="table-header-cell"><span>Second and wide column</span></div>
    <div class="table-header-cell align-right"><span>Align right & bottom</span></div>
    <div class="table-header-cell align-center"><span>Action</span></div>
  </div>
  <div class="table-row">
    <div class="table-cell align-center">
      <div class="eui-checkbox">
        <input type="checkbox">
      </div>
    </div>
    <div class="table-cell align-top"><span>Cell align-top</span></div>
    <div class="table-cell"><span>Defines the template for the columns</span></div>
    <div class="table-cell align-right align-bottom"><span>01.01.1970</span></div>
    <div class="table-cell align-center"><button type="button" class="eui-button default accent">button</button></div>
  </div>
</div>

• --grid-template-columns: 64px repeat(3, 1fr) 186px;

<div class="eui-table xsmall" style="--grid-template-columns: 64px repeat(3, 1fr) 186px;">
  <div class="table-header-row">
    <div class="table-header-cell align-center">
      <div class="eui-checkbox">
        <input type="checkbox">
      </div>
    </div>
    <div class="table-header-cell"><span>Column</span></div>
    <div class="table-header-cell"><span>Second and wide column</span></div>
    <div class="table-header-cell align-right"><span>Align right & bottom</span></div>
    <div class="table-header-cell align-center"><span>Action</span></div>
  </div>
  <div class="table-row">
    <div class="table-cell align-center">
      <div class="eui-checkbox">
        <input type="checkbox">
      </div>
    </div>
    <div class="table-cell align-top"><span>Cell align-top</span></div>
    <div class="table-cell"><span>Defines the template for the columns</span></div>
    <div class="table-cell align-right align-bottom"><span>01.01.1970</span></div>
    <div class="table-cell align-center"><button type="button" class="eui-button default accent">button</button></div>
  </div>
</div>

• --grid-template-columns: 1fr 2fr 2fr 3fr 1fr;

<div class="eui-table xsmall" style="--grid-template-columns: 1fr 2fr 2fr 3fr 1fr;">
  <div class="table-header-row">
    <div class="table-header-cell align-center">
      <div class="eui-checkbox">
        <input type="checkbox">
      </div>
    </div>
    <div class="table-header-cell"><span>Column</span></div>
    <div class="table-header-cell"><span>Second and wide column</span></div>
    <div class="table-header-cell align-right"><span>Align right & bottom</span></div>
    <div class="table-header-cell align-center"><span>Action</span></div>
  </div>
  <div class="table-row">
    <div class="table-cell align-center">
      <div class="eui-checkbox">
        <input type="checkbox">
      </div>
    </div>
    <div class="table-cell align-top"><span>Cell align-top</span></div>
    <div class="table-cell"><span>Defines the template for the columns</span></div>
    <div class="table-cell align-right align-bottom"><span>01.01.1970</span></div>
    <div class="table-cell align-center"><button type="button" class="eui-button default accent">button</button></div>
  </div>
</div>

MDN: grid-template-columns

Modifiers

With the four required modifiers xsmall, small .medium and .large, you can have a rows of different heights.

Add .sticky-header if you want to stick header. In this case, it is necessary to determine the height for table. Like .eui-table { height: calc(100vh - 240px); }

Helpers

To avoid overflow in .table-header-cell, the text must be placed in span.

To align elements in a table cell — use:

horizontal axis: .align-center, .align-right,

vertical axis: .align-top, .align-bottom.

By default, each column will have an equal width, no matter the number of columns. If you want to change the size of columns, you can use col-N class, where N — number of span columns. In this case, you must add col-N for each elements.

Table .xsmall (XS)

<div class="eui-table xsmall">
  <div class="table-header-row">
    <div class="table-header-cell align-center">
      <div class="eui-checkbox">
        <input type="checkbox">
      </div>
    </div>
    <div class="table-header-cell"><span>Column</span></div>
    <div class="table-header-cell"><span>Second and wide column</span></div>
    <div class="table-header-cell align-right"><span>Align right & bottom</span></div>
    <div class="table-header-cell align-center"><span>Action</span></div>
  </div>
  <div class="table-row">
    <div class="table-cell align-center">
      <div class="eui-checkbox">
        <input type="checkbox">
      </div>
    </div>
    <div class="table-cell align-top"><span>Cell align-top</span></div>
    <div class="table-cell"><span>Defines the template for the columns</span></div>
    <div class="table-cell align-right align-bottom"><span>01.01.1970</span></div>
    <div class="table-cell align-center"><button type="button" class="eui-button default accent">button</button></div>
  </div>
</div>

Table .small (S)

<div class="eui-table small">
  <div class="table-header-row">
    <div class="table-header-cell align-center">
      <div class="eui-checkbox">
        <input type="checkbox">
      </div>
    </div>
    <div class="table-header-cell"><span>First</span></div>
    <div class="table-header-cell"><span>Second and wide column</span></div>
    <div class="table-header-cell"><span>dd/mm/Y</span></div>
    <div class="table-header-cell align-center"><span>Action</span></div>
  </div>
  <div class="table-row">
    <div class="table-cell align-center">
      <div class="eui-checkbox">
        <input type="checkbox">
      </div>
    </div>
    <div class="table-cell"><span>First column content</span></div>
    <div class="table-cell"><span>Defines the template for the columns</span></div>
    <div class="table-cell"><span>01.01.1970</span></div>
    <div class="table-cell align-center"><button type="button" class="eui-button default accent">button</button></div>
  </div>
</div>

Table .medium (M)

<div class="eui-table medium">
  <div class="table-header-row">
    <div class="table-header-cell align-center">
      <div class="eui-checkbox">
        <input type="checkbox">
      </div>
    </div>
    <div class="table-header-cell"><span>First</span></div>
    <div class="table-header-cell"><span>Second and wide column</span></div>
    <div class="table-header-cell"><span>dd/mm/Y</span></div>
    <div class="table-header-cell align-center"><span>Action</span></div>
  </div>
  <div class="table-row">
    <div class="table-cell align-center">
      <div class="eui-checkbox">
        <input type="checkbox">
      </div>
    </div>
    <div class="table-cell"><span>First column content</span></div>
    <div class="table-cell"><span>Defines the template for the columns</span></div>
    <div class="table-cell"><span>01.01.1970</span></div>
    <div class="table-cell align-center"><button type="button" class="eui-button default accent">button</button></div>
  </div>
</div>

Table .large (L)

<div class="eui-table large">
  <div class="table-header-row">
    <div class="table-header-cell align-center">
      <div class="eui-checkbox">
        <input type="checkbox">
      </div>
    </div>
    <div class="table-header-cell"><span>First</span></div>
    <div class="table-header-cell"><span>Second and wide column</span></div>
    <div class="table-header-cell"><span>dd/mm/Y</span></div>
    <div class="table-header-cell align-center"><span>Action</span></div>
  </div>
  <div class="table-row">
    <div class="table-cell align-center">
      <div class="eui-checkbox">
        <input type="checkbox">
      </div>
    </div>
    <div class="table-cell">

      <div class="eui-form-group">
        <div class="eui-form-control">
          <div class="eui-form-control-input">
            <input type="text" placeholder="input in the table">
          </div>
          <span class="eui-error">Error message</span>
        </div>
      </div>

    </div>
    <div class="table-cell"><span>Defines the template for the columns</span></div>
    <div class="table-cell"><span>01.01.1970</span></div>
    <div class="table-cell align-center"><button type="button" class="eui-button default accent">button</button></div>
  </div>
</div>

Tabs organize and allow navigation between groups of content. Tab may contains a text label or icon.

<nav class="eui-tabs">
  <a href="javascript:;" class="tab-item is-active">
    <span class="tab-label">Users</span>
  </a>
  <a href="javascript:;" class="tab-item">
    <span class="tab-label">History</span>
  </a>
  <a href="javascript:;" class="tab-item">
    <span class="tab-label">Archive</span>
  </a>
  <a href="javascript:;" class="tab-item">
    <i class="ni ni-cog tab-icon"></i>
    <span class="tab-label">Settings</span>
  </a>
</nav>

Class .is-full-width to stretch tabs to full width with equal width tab items.

<nav class="eui-tabs is-full-width">
  <a href="javascript:;" class="tab-item is-active">
    <span class="tab-label">Bigger, Longer & Uncut</span>
  </a>
  <a href="javascript:;" class="tab-item">
    <span class="tab-label">Cut</span>
  </a>
</nav>

A badge displays content classification

<span class="eui-badge default primary">primary</span>
<span class="eui-badge default success">success</span>
<span class="eui-badge default warning">warning</span>
<span class="eui-badge default accent">accent</span>
<span class="eui-badge default negative">negative</span>

This component will help you notify your users.

<div class="eui-notification">
  <button class="eui-icon-button eui-notification-close">
    <i class="ni ni-close"></i>
  </button>
  <div class="eui-notification-image">
    <i class="ni ni-map" style="font-size: 7rem"></i>
  </div>
  <div class="eui-notification-body">
    <div class="eui-notification-title u-h3">Title</div>
    <div class="eui-notification-message">
     Speak softer, I cannot understand you anyway. Do not bother me I’m building socialism.
    </div>
  </div>
</div>

.eui-scrollbar class can be used to change the scrollbar in the container. This works only in chrome so far. Class .eui-scrollbar-large or .eui-scrollbar-small is required, they set the width of the scrollbar. Here are some styling tips (webkit.org).

<div class="eui-scrollbar eui-scrollbar-large" style="max-height: 100px;">
  <div class="demo-scroll-content"></div>
</div>

Example using class .eui-scrollbar-small

<div class="eui-scrollbar eui-scrollbar-small" style="max-height: 100px;">
  <div class="demo-scroll-content"></div>
</div>

Header component represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.

<header class="eui-main-header">
  <div class="eui-main-header-inner">
    <div class="eui-main-header-logo">
      <div class="eui-main-header-logo-image">
        <strong class="eui-main-header-logo-text u-h3">Logo text</strong>
      </div>
    </div>
  </div>
</header>

Header with logo image.

<header class="eui-main-header">
  <div class="eui-main-header-inner">
    <div class="eui-main-header-logo">
      <div class="eui-main-header-logo-image">
        <img src="https://via.placeholder.com/176x88.png?text=Logo image" alt="logo">
      </div>
    </div>
  </div>
</header>

Utilities for text alignment

<div class="u-text-center demo-border-bottom">Centered</div>
<div class="u-text-right demo-border-bottom">Right</div>
<div class="u-text-justify demo-border-bottom">Justified</div>

Utilities for text colors to be able to emphasise text blocks

<div class="u-text-accent demo-border-bottom">Accent</div>
<div class="u-text-success demo-border-bottom">Success</div>
<div class="u-text-negative demo-border-bottom">Negative</div>