UI Kit

Overview
Principles
Icons
Colors
Flex grid
Functions
Grid
Media
Mixins
Typography
Utility
Button
Checkbox
Emoji
Field
Input
Multiselect
Numberinput
Radio
Select
Switch
Textarea
Tokeninput
Upload
Box
Emptystate
Field
Fullheight
Header
Infolayer
Phone
Separator
Fixed
Deprecated Flex Grid
Grid
Accordion
Navigation bar
Pagination
Steps
Tab
Verticalnav
Alert
Notice
Progress
Spinner
Validator
Button
Button group
Button radio
Calendar
Card
Carousel
Chart
Colorpicker
Compare
Criteria
Datepicker
Daterange
Datetimepicker
Dialog
Dropdown
Fieldset
Inplaceeditor
Label
List
Overlay
Ring
Snackbar
Table
Tooltip

Using Emptystate

When to use emptystate?

Use empty states to help users understand what a feature is about, and what they should do to get started with the feature. Empty state should be recognizable and different to the normal state of the feature.

Guidelines

  1. When creating the icon, add a specific one recognizable one that stands for the feature or the elements. This also helps the user understanding that they don't see the real content.
  2. Add a title should describe the action to perform to get started with the feature, max 1 sentence.
  3. Add body text provides further instruction on what to do (onboarding) with link to the documentation - 1-2 sentences.
  4. Add a primary button (action or link) that gets the users started with the feature.
Last update:
()
Message fix(emptystate): text overflow in IE max-width
Committer: dkocsis
Version history

Default

Copy Jade
Copy HTML
Show code
Hide code
.e-emptystate 

<div style="height:400px">
  <div class="e-emptystate">
    <e-icon icon="picture-o" class="e-emptystate__icon"></e-icon>
    <div class="e-emptystate__content">
      <div class="e-emptystate__title">
        Cupidatat consectetur eu ut magna 
      </div>
      <div class="e-emptystate__lead">
        Nulla nulla aute incididunt duis dolor cupidatat non eiusmod cillum 
      </div>
      <div class="e-emptystate__button e-btn e-btn-secondary">
        Primary button
      </div>
      <div class="e-emptystate__button e-btn e-btn-link">
        Secondary button
      </div>
    </div>
  </div>
</div>


                                <div style="height:400px">
                                  <div class="e-emptystate">
                                    <e-icon icon="picture-o" class="e-emptystate__icon"></e-icon>
                                    <div class="e-emptystate__content">
                                      <div class="e-emptystate__title">Ut magna labore amet cillum 
                                      </div>
                                      <div class="e-emptystate__lead">Aliqua fugiat adipiscing consectetur magna voluptate eiusmod magna mollit dolor 
                                      </div>
                                      <div class="e-emptystate__button e-btn e-btn-secondary">Primary button</div>
                                      <div class="e-emptystate__button e-btn e-btn-link">Secondary button</div>
                                    </div>
                                  </div>
                                </div>
In qui nisi aliquip esse
Enim consectetur cillum magna proident consequat elit velit anim aute
Primary button
Secondary button

Variations

Small icon
Copy Jade
Copy HTML
Show code
Hide code
.e-emptystate__icon-small 

<div style="height:400px;">
  <div class="e-emptystate">
    <e-icon icon="eye" class="e-emptystate__icon e-emptystate__icon-small"></e-icon>
    <div class="e-emptystate__content">
      <div class="e-emptystate__title">
        Culpa aliqua ullamco aliquip ut 
      </div>
      <div class="e-emptystate__lead">
        Velit velit et magna aliquip proident ut officia proident amet 
      </div>
      <div class="e-emptystate__button e-btn e-btn-secondary">
        Primary button
      </div>
    </div>
  </div>
</div>


                                  <div style="height:400px;">
                                    <div class="e-emptystate">
                                      <e-icon icon="eye" class="e-emptystate__icon e-emptystate__icon-small"></e-icon>
                                      <div class="e-emptystate__content">
                                        <div class="e-emptystate__title">Cillum ut labore in esse 
                                        </div>
                                        <div class="e-emptystate__lead">Excepteur et deserunt nulla eiusmod occaecat tempor quis nulla irure 
                                        </div>
                                        <div class="e-emptystate__button e-btn e-btn-secondary">Primary button</div>
                                      </div>
                                    </div>
                                  </div>
Nulla exercitation exercitation reprehenderit nostrud
Esse minim commodo ut in in et magna exercitation anim
Primary button

Align top
Copy Jade
Copy HTML
Show code
Hide code
.e-emptystate-top 

<div style="height:400px;">
  <div class="e-emptystate e-emptystate-top">
    <e-icon icon="picture-o" class="e-emptystate__icon"></e-icon>
    <div class="e-emptystate__content">
      <div class="e-emptystate__title">
        Deserunt dolor ut adipiscing sint 
      </div>
      <div class="e-emptystate__lead">
        Ut aliquip ut laborum commodo ut lorem reprehenderit aliqua exercitation 
      </div>
      <div class="e-emptystate__button e-btn e-btn-secondary">
        Primary button
      </div>
    </div>
  </div>
</div>


                                  <div style="height:400px;">
                                    <div class="e-emptystate e-emptystate-top">
                                      <e-icon icon="picture-o" class="e-emptystate__icon"></e-icon>
                                      <div class="e-emptystate__content">
                                        <div class="e-emptystate__title">Officia aute ad commodo dolore 
                                        </div>
                                        <div class="e-emptystate__lead">Ex aliquip tempor laborum exercitation culpa ut tempor proident occaecat 
                                        </div>
                                        <div class="e-emptystate__button e-btn e-btn-secondary">Primary button</div>
                                      </div>
                                    </div>
                                  </div>
Quis tempor eiusmod laboris in
In id ut est mollit id consequat ut cupidatat veniam
Primary button

Horizontal
Copy Jade
Copy HTML
Show code
Hide code
.e-emptystate-horizontal 

<div style="height:400px;">
  <div class="e-emptystate e-emptystate-horizontal">
    <e-icon icon="picture-o" class="e-emptystate__icon"></e-icon>
    <div class="e-emptystate__content">
      <div class="e-emptystate__title">
        Ut cillum sint ad mollit 
      </div>
      <div class="e-emptystate__lead">
        Aute ex qui dolore sit eiusmod ut fugiat in quis 
      </div>
      <div class="e-emptystate__button e-btn e-btn-secondary">
        Primary button
      </div>
    </div>
  </div>
</div>


                                  <div style="height:400px;">
                                    <div class="e-emptystate e-emptystate-horizontal">
                                      <e-icon icon="picture-o" class="e-emptystate__icon"></e-icon>
                                      <div class="e-emptystate__content">
                                        <div class="e-emptystate__title">Officia laborum fugiat qui cillum 
                                        </div>
                                        <div class="e-emptystate__lead">Voluptate magna ut commodo do velit in esse ut est 
                                        </div>
                                        <div class="e-emptystate__button e-btn e-btn-secondary">Primary button</div>
                                      </div>
                                    </div>
                                  </div>
Sint non sed enim voluptate
Quis sint reprehenderit sunt pariatur anim nulla irure ad veniam
Primary button

With image
Copy Jade
Copy HTML
Show code
Hide code 

<div style="height:400px;">
  <div class="e-emptystate">
    <img src="https://placehold.it/150x150/7a81be/fff" class="e-emptystate__image">
    <div class="e-emptystate__content">
      <div class="e-emptystate__title">
        Consequat voluptate aute non consequat 
      </div>
      <div class="e-emptystate__lead">
        Magna laborum ut ad voluptate consectetur labore nisi sint sit 
      </div>
      <div class="e-emptystate__button e-btn e-btn-secondary">
        Primary button
      </div>
    </div>
  </div>
</div>


                                  <div style="height:400px;">
                                    <div class="e-emptystate"><img src="https://placehold.it/150x150/7a81be/fff" class="e-emptystate__image">
                                      <div class="e-emptystate__content">
                                        <div class="e-emptystate__title">Sed tempor et nisi occaecat 
                                        </div>
                                        <div class="e-emptystate__lead">In pariatur magna ut nisi nulla ut et non dolore 
                                        </div>
                                        <div class="e-emptystate__button e-btn e-btn-secondary">Primary button</div>
                                      </div>
                                    </div>
                                  </div>
Tempor proident non quis consequat
Tempor deserunt lorem duis lorem esse in culpa esse enim
Primary button

In overlay
Copy Jade
Copy HTML
Show code
Hide code 

<div class="e-overlay e-overlay-inverse">
  <div class="e-emptystate">
    <e-icon icon="picture-o" class="e-emptystate__icon"></e-icon>
    <div class="e-emptystate__content">
      <div class="e-emptystate__title">
        Sint laboris occaecat do cupidatat 
      </div>
      <div class="e-emptystate__lead">
        Incididunt cupidatat dolore ex proident dolore irure nulla minim duis 
      </div>
      <div onclick="console.log(this.parentNode.parentNode.parentNode.parentNode.classList.add('e-hidden'))" class="e-emptystate__button e-btn e-btn-secondary">
        Hide this overlay
      </div>
    </div>
  </div>
</div>


                                  <div class="e-overlay e-overlay-inverse">
                                    <div class="e-emptystate">
                                      <e-icon icon="picture-o" class="e-emptystate__icon"></e-icon>
                                      <div class="e-emptystate__content">
                                        <div class="e-emptystate__title">Cillum ex ut in est 
                                        </div>
                                        <div class="e-emptystate__lead">Et dolor culpa sunt nisi fugiat sed laborum aliquip dolor 
                                        </div>
                                        <div onclick="console.log(this.parentNode.parentNode.parentNode.parentNode.classList.add('e-hidden'))" class="e-emptystate__button e-btn e-btn-secondary">Hide this overlay</div>
                                      </div>
                                    </div>
                                  </div>
Show / Hide
Consequat ad nulla in sit
Voluptate sunt laborum consectetur labore dolore esse ut culpa consectetur
Hide this overlay

With image - Horizontal
Copy Jade
Copy HTML
Show code
Hide code
.e-emptystate-horizontal 

<div style="height:400px;">
  <div class="e-emptystate e-emptystate-horizontal">
    <img src="https://placehold.it/150x150/7a81be/fff" class="e-emptystate__image">
    <div class="e-emptystate__content">
      <div class="e-emptystate__title">
        Elit ad quis aliqua ea 
      </div>
      <div class="e-emptystate__lead">
        Do non deserunt sunt proident duis anim quis voluptate culpa 
      </div>
      <div class="e-emptystate__button e-btn e-btn-secondary">
        Primary button
      </div>
    </div>
  </div>
</div>


                                  <div style="height:400px;">
                                    <div class="e-emptystate e-emptystate-horizontal"><img src="https://placehold.it/150x150/7a81be/fff" class="e-emptystate__image">
                                      <div class="e-emptystate__content">
                                        <div class="e-emptystate__title">Excepteur commodo aliqua elit in 
                                        </div>
                                        <div class="e-emptystate__lead">Tempor adipiscing id in ut laborum irure aute nisi nisi 
                                        </div>
                                        <div class="e-emptystate__button e-btn e-btn-secondary">Primary button</div>
                                      </div>
                                    </div>
                                  </div>
Sint qui ea consectetur proident
Enim consequat ea elit et pariatur id ex non velit
Primary button

Without icon and image
Copy Jade
Copy HTML
Show code
Hide code 

<div style="height:400px;">
  <div class="e-emptystate">
    <div class="e-emptystate__content">
      <div class="e-emptystate__title">
        Labore reprehenderit qui sit ullamco 
      </div>
      <div class="e-emptystate__lead">
        Dolore anim id voluptate cupidatat nisi aliquip laborum ea proident 
      </div>
      <div class="e-emptystate__button e-btn e-btn-secondary">
        Primary button
      </div>
    </div>
  </div>
</div>


                                  <div style="height:400px;">
                                    <div class="e-emptystate">
                                      <div class="e-emptystate__content">
                                        <div class="e-emptystate__title">Ut amet ullamco ad occaecat 
                                        </div>
                                        <div class="e-emptystate__lead">Commodo reprehenderit sit voluptate in voluptate aute ea fugiat sunt 
                                        </div>
                                        <div class="e-emptystate__button e-btn e-btn-secondary">Primary button</div>
                                      </div>
                                    </div>
                                  </div>
Esse sit ea elit elit
Pariatur sed nisi excepteur esse minim ex anim enim labore
Primary button