Welcome
Design Principles
For Developers
For Designers
Extending
Writing Guidelines
Color
Icon
Text
General
Overview
Tabs
Form
Card
Editor
Iframe
Basic Grid
Flex Grid
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Action List
Upgrade
Order
Field
Input Group
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Numberinput
Textarea
Upload
Select
Multiselect
Datetime
Slider
Criteria
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Ring
Compare
Notification
Progress
Spinner
Validator
Tooltip
Checklist
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Widget
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
CSS Utility Classes
Flipper Service
Config
Authentication Token
Translation
Tracking
Redesign
Numeric
Time
Iframe Loader
Release Notes

Emptystate

Use an Emptystate in large empty containers the user is supposed to fill up with content. An Emptystate helps users understand what a feature is about, and what they should do to get started with it. An Emptystate should be recognizable and different from the normal state of the feature.

Default

Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-emptystate

<div style="height:400px">
  <div class="e-emptystate">
    <e-icon class="e-emptystate__icon" icon="picture-o"></e-icon>
    <div class="e-emptystate__content">
      <div class="e-emptystate__title">
        Duis id pariatur nulla ad 
      </div>
      <div class="e-emptystate__lead">
        Minim incididunt fugiat enim veniam laborum ut dolor ea nisi 
      </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 class="e-emptystate__icon" icon="picture-o"></e-icon>
    <div class="e-emptystate__content">
      <div class="e-emptystate__title">
        Officia occaecat aliquip mollit ut 
      </div>
      <div class="e-emptystate__lead">
        Commodo laboris esse mollit non dolor exercitation dolor ullamco occaecat 
      </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>
JavaScript
Copy JavaScript
Irure dolor irure cillum dolor
Occaecat laborum eu labore veniam proident aute ea veniam ut
Primary button
Secondary button

Variations

With helper link
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-emptystate__helperlink

<div style="height:400px">
  <div class="e-emptystate">
    <e-icon class="e-emptystate__icon" icon="picture-o"></e-icon>
    <div class="e-emptystate__content">
      <div class="e-emptystate__title">
        Sit est duis adipiscing tempor 
      </div>
      <div class="e-emptystate__lead">
        Eiusmod tempor dolore cillum amet veniam quis ad fugiat occaecat 
      </div>
      <div class="e-emptystate__button e-btn e-btn-secondary">
        Primary button
      </div>
      <a class="e-emptystate__helperlink e-helperlink e-helperlink-nopadding" href="#" target="_blank">
        <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
        <span class="e-helperlink__text">
          Learn more
        </span>
      </a>
    </div>
  </div>
</div>
<div style="height:400px">
  <div class="e-emptystate">
    <e-icon class="e-emptystate__icon" icon="picture-o"></e-icon>
    <div class="e-emptystate__content">
      <div class="e-emptystate__title">
        Esse ut proident dolor do 
      </div>
      <div class="e-emptystate__lead">
        Non eu excepteur eiusmod duis excepteur excepteur nulla commodo voluptate 
      </div>
      <div class="e-emptystate__button e-btn e-btn-secondary">
        Primary button
      </div>
      <a class="e-emptystate__helperlink e-helperlink e-helperlink-nopadding" href="#" target="_blank">
        <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
        <span class="e-helperlink__text">
          Learn more
        </span>
      </a>
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Sed enim nulla quis non
Nulla eu occaecat sed culpa ullamco minim labore et eu
Primary button
Learn more

Small icon
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-emptystate__icon-small

<div style="height:400px;">
  <div class="e-emptystate">
    <e-icon class="e-emptystate__icon e-emptystate__icon-small" icon="eye"></e-icon>
    <div class="e-emptystate__content">
      <div class="e-emptystate__title">
        Sit ut ullamco officia elit 
      </div>
      <div class="e-emptystate__lead">
        Ut nostrud pariatur labore ut in est mollit dolor eu 
      </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 class="e-emptystate__icon e-emptystate__icon-small" icon="eye"></e-icon>
    <div class="e-emptystate__content">
      <div class="e-emptystate__title">
        Anim eiusmod in anim velit 
      </div>
      <div class="e-emptystate__lead">
        In in qui veniam officia occaecat in dolore cillum dolore 
      </div>
      <div class="e-emptystate__button e-btn e-btn-secondary">
        Primary button
      </div>
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Veniam enim commodo nisi voluptate
Pariatur est commodo id anim et culpa in non ad
Primary button

Align top
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-emptystate-top

<div style="height:400px;">
  <div class="e-emptystate e-emptystate-top">
    <e-icon class="e-emptystate__icon" icon="picture-o"></e-icon>
    <div class="e-emptystate__content">
      <div class="e-emptystate__title">
        Labore et minim lorem veniam 
      </div>
      <div class="e-emptystate__lead">
        Et ut proident do id esse velit sit dolore ut 
      </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 class="e-emptystate__icon" icon="picture-o"></e-icon>
    <div class="e-emptystate__content">
      <div class="e-emptystate__title">
        Ut enim consequat deserunt labore 
      </div>
      <div class="e-emptystate__lead">
        Est laborum aute dolore cillum cupidatat ut anim et excepteur 
      </div>
      <div class="e-emptystate__button e-btn e-btn-secondary">
        Primary button
      </div>
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Aute officia in nulla occaecat
Exercitation anim magna sint ad labore anim lorem voluptate veniam
Primary button

Horizontal
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-emptystate-horizontal

<div style="height:400px;">
  <div class="e-emptystate e-emptystate-horizontal">
    <e-icon class="e-emptystate__icon" icon="picture-o"></e-icon>
    <div class="e-emptystate__content">
      <div class="e-emptystate__title">
        Occaecat qui ut elit in 
      </div>
      <div class="e-emptystate__lead">
        Minim enim ut ea pariatur ut consequat aute qui sint 
      </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 class="e-emptystate__icon" icon="picture-o"></e-icon>
    <div class="e-emptystate__content">
      <div class="e-emptystate__title">
        Occaecat et dolore et eu 
      </div>
      <div class="e-emptystate__lead">
        Nisi qui occaecat eiusmod aliquip laborum incididunt ut nisi deserunt 
      </div>
      <div class="e-emptystate__button e-btn e-btn-secondary">
        Primary button
      </div>
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Sed est veniam magna mollit
Tempor enim qui dolore tempor anim anim duis sunt veniam
Primary button

With image
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<div style="height:400px;">
  <div class="e-emptystate">
    <img class="e-emptystate__image" src="https://placehold.it/150x150/7a81be/fff">
    <div class="e-emptystate__content">
      <div class="e-emptystate__title">
        Aute duis aute in incididunt 
      </div>
      <div class="e-emptystate__lead">
        Non aute duis labore non dolore dolor ea voluptate in 
      </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 class="e-emptystate__image" src="https://placehold.it/150x150/7a81be/fff">
    <div class="e-emptystate__content">
      <div class="e-emptystate__title">
        Ullamco mollit elit reprehenderit anim 
      </div>
      <div class="e-emptystate__lead">
        Esse in ex enim sint cillum et exercitation occaecat ex 
      </div>
      <div class="e-emptystate__button e-btn e-btn-secondary">
        Primary button
      </div>
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Incididunt id duis sunt esse
Nulla sint dolore qui velit sint dolore dolor do sit
Primary button

In overlay
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<div class="e-overlay e-overlay-inverse">
  <div class="e-emptystate">
    <e-icon class="e-emptystate__icon" icon="picture-o"></e-icon>
    <div class="e-emptystate__content">
      <div class="e-emptystate__title">
        Duis dolor irure officia ex 
      </div>
      <div class="e-emptystate__lead">
        Lorem dolore fugiat enim non nostrud dolor sint mollit incididunt 
      </div>
      <div class="e-emptystate__button e-btn e-btn-secondary" onclick="console.log(this.parentNode.parentNode.parentNode.parentNode.classList.add('e-hidden'))">
        Hide this overlay
      </div>
    </div>
  </div>
</div>
<div class="e-overlay e-overlay-inverse">
  <div class="e-emptystate">
    <e-icon class="e-emptystate__icon" icon="picture-o"></e-icon>
    <div class="e-emptystate__content">
      <div class="e-emptystate__title">
        Quis eiusmod dolor laboris quis 
      </div>
      <div class="e-emptystate__lead">
        Eu commodo dolore reprehenderit est dolor commodo eiusmod nisi ut 
      </div>
      <div class="e-emptystate__button e-btn e-btn-secondary" onclick="console.log(this.parentNode.parentNode.parentNode.parentNode.classList.add('e-hidden'))">
        Hide this overlay
      </div>
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Show / Hide
Id culpa esse occaecat reprehenderit
Ut sed ullamco dolor in non laboris ea non culpa
Hide this overlay

With image - Horizontal
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-emptystate-horizontal

<div style="height:400px;">
  <div class="e-emptystate e-emptystate-horizontal">
    <img class="e-emptystate__image" src="https://placehold.it/150x150/7a81be/fff">
    <div class="e-emptystate__content">
      <div class="e-emptystate__title">
        Cupidatat lorem in in ea 
      </div>
      <div class="e-emptystate__lead">
        Aliquip duis amet sint exercitation incididunt commodo lorem ut ea 
      </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 class="e-emptystate__image" src="https://placehold.it/150x150/7a81be/fff">
    <div class="e-emptystate__content">
      <div class="e-emptystate__title">
        Elit irure exercitation minim ullamco 
      </div>
      <div class="e-emptystate__lead">
        Ex deserunt quis deserunt ea minim id commodo commodo aliqua 
      </div>
      <div class="e-emptystate__button e-btn e-btn-secondary">
        Primary button
      </div>
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Sit dolor cupidatat qui ea
Ut sint velit exercitation consequat dolore do consequat quis tempor
Primary button

Without icon and image
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<div style="height:400px;">
  <div class="e-emptystate">
    <div class="e-emptystate__content">
      <div class="e-emptystate__title">
        Et aute incididunt ut ex 
      </div>
      <div class="e-emptystate__lead">
        Ipsum nulla laboris dolor veniam esse dolore esse laboris voluptate 
      </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">
        Proident veniam cupidatat consequat excepteur 
      </div>
      <div class="e-emptystate__lead">
        Elit veniam adipiscing proident in consequat nulla proident veniam consequat 
      </div>
      <div class="e-emptystate__button e-btn e-btn-secondary">
        Primary button
      </div>
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Nisi id cillum ut ex
Ullamco id proident laboris officia laboris dolore qui mollit reprehenderit
Primary button

Emptystate

When to use emptystate?

Use an emptystate in large empty containers the user is supposed to fill up with content. An emptystate helps users understand what a feature is about, and what they should do to get started with it. An emptystate should be recognizable and different from the normal state of the feature.

Guidelines

  • When adding the icon, choose a specific, recognizable one that stands for the feature or its elements. This also helps the user understand that they don't see the real content.
  • Add a title to describe the action to perform to get started with the feature - 1 sentence.
  • Add body text to provide further instructions on what to do (onboarding) with link to the documentation - 1-2 sentences.
  • Preferably, add a primary button (action or link) that gets the users started with the feature.
  • Emptystate is not a placeholder for real content. Unlike placeholder texts and images, the content and appearance of the emptystate is entirely detached from the real content of the container.
  • Preferably, use double-width margins around the emptystate so the contents of the emptystate feel properly grouped.
  • When the entire empty container is visible without scrolling, the emptystate should be both horizontally and vertically centered in the container. This strengthens the affordance of the emptystate (e.g. it belongs to the container, it's not a placeholder for real content).
  • When parts of the empty container is not visible without scrolling (i.e. it's "too long"), the emptystate should be vertically aligned to the top.
  • Preferably, use emptystate over a white background. Don't use the emptystate over colored backgrounds, or over grey backgrounds darker than #F3F3F3. It would significantly hurt its contrast.