Getting Started
Color
Icon
Text
Basic Grid
Flex Grid
Media queries
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Field
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Tokeninput
Numberinput
Textarea
Upload
Select
Multiselect
Daterange
Calendar
Slider
Criteria
Datepicker
Datetimepicker
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Funnelchart
Ring
Compare
Alert
Notice
Notification
Progress
Spinner
Validator
Tooltip
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Heading
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
Upsell Page
Card Grid
Dashboard Page
Form
Horizontal Tab Box
Two Panel Box
Vertical Tab Box
Utilities
Numeric
Time
Iframe Loader

Using 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.

Default

Copy Pug
Copy HTML
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">
        Fugiat laborum aliquip amet consequat 
      </div>
      <div class="e-emptystate__lead">
        Laboris sit mollit do exercitation et ad voluptate nisi pariatur 
      </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">Sunt enim est cillum dolor </div><div class="e-emptystate__lead">Deserunt mollit voluptate sit ad dolore tempor commodo qui proident </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>
Sint occaecat quis officia occaecat
Qui commodo deserunt id aute veniam occaecat consequat amet dolore
Primary button
Secondary button

Variations

With helper link
Copy Pug
Copy HTML
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">
        Eu sint nulla quis incididunt 
      </div>
      <div class="e-emptystate__lead">
        Ullamco aliqua elit dolor do commodo quis dolor in est 
      </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">Laborum laboris magna veniam elit </div><div class="e-emptystate__lead">Tempor ex elit veniam fugiat nisi dolor cupidatat esse in </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>
Ea labore laborum ullamco eiusmod
Cillum eu deserunt lorem lorem reprehenderit proident elit dolor dolor
Primary button
Learn more

Small icon
Copy Pug
Copy HTML
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">
        Dolor est dolore reprehenderit lorem 
      </div>
      <div class="e-emptystate__lead">
        Dolore anim excepteur consectetur tempor est est veniam officia cupidatat 
      </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">Mollit id aliqua qui duis </div><div class="e-emptystate__lead">Aliqua in ullamco dolore sint enim sint duis pariatur occaecat </div><div class="e-emptystate__button e-btn e-btn-secondary">Primary button</div></div></div></div>
Occaecat occaecat in in ipsum
Eu tempor esse quis officia non veniam ut duis aute
Primary button

Align top
Copy Pug
Copy HTML
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">
        Proident qui nisi esse amet 
      </div>
      <div class="e-emptystate__lead">
        Consectetur tempor amet consectetur anim aliqua deserunt irure mollit officia 
      </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">Enim amet elit officia aliquip </div><div class="e-emptystate__lead">Ea ut deserunt ut dolore non consequat occaecat aute reprehenderit </div><div class="e-emptystate__button e-btn e-btn-secondary">Primary button</div></div></div></div>
Esse aute id proident id
Sint cupidatat qui exercitation labore pariatur ullamco quis consectetur incididunt
Primary button

Horizontal
Copy Pug
Copy HTML
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">
        Ad duis magna aliqua officia 
      </div>
      <div class="e-emptystate__lead">
        Cupidatat elit dolor sit minim laboris labore sunt sint anim 
      </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">Reprehenderit eu in dolor labore </div><div class="e-emptystate__lead">Ut sit in nostrud ipsum qui deserunt tempor aliqua reprehenderit </div><div class="e-emptystate__button e-btn e-btn-secondary">Primary button</div></div></div></div>
Voluptate culpa labore esse sed
Eu minim excepteur id cupidatat quis irure tempor velit in
Primary button

With image
Copy Pug
Copy HTML
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">
        Sit sunt quis minim labore 
      </div>
      <div class="e-emptystate__lead">
        Esse aliqua in voluptate id officia non laboris duis et 
      </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">Ex elit enim cupidatat adipiscing </div><div class="e-emptystate__lead">In mollit dolor lorem labore cupidatat exercitation voluptate esse aliqua </div><div class="e-emptystate__button e-btn e-btn-secondary">Primary button</div></div></div></div>
Sed laboris eu amet ea
Nisi eu mollit consequat nisi laboris ut eiusmod pariatur irure
Primary button

In overlay
Copy Pug
Copy HTML
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">
        In eu nulla proident ad 
      </div>
      <div class="e-emptystate__lead">
        Adipiscing lorem eu sint exercitation dolore est cupidatat ut amet 
      </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">Do adipiscing elit magna cillum </div><div class="e-emptystate__lead">Enim mollit eu mollit aliquip excepteur ea in sit reprehenderit </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>
Show / Hide
Laborum commodo cillum tempor nisi
Pariatur consectetur veniam adipiscing non dolore in sit laboris sed
Hide this overlay

With image - Horizontal
Copy Pug
Copy HTML
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">
        Duis laboris ex nulla nulla 
      </div>
      <div class="e-emptystate__lead">
        Ut laborum esse velit proident aliquip voluptate minim ad deserunt 
      </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">Nostrud quis nostrud pariatur magna </div><div class="e-emptystate__lead">Ullamco nulla ut deserunt dolor est do fugiat dolore eiusmod </div><div class="e-emptystate__button e-btn e-btn-secondary">Primary button</div></div></div></div>
In velit nostrud do quis
Ipsum in enim non ex commodo minim in ea ut
Primary button

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

<div style="height:400px;">
  <div class="e-emptystate">
    <div class="e-emptystate__content">
      <div class="e-emptystate__title">
        Ullamco consequat laborum cillum nulla 
      </div>
      <div class="e-emptystate__lead">
        Dolore ut sunt ad in officia qui dolor amet non 
      </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">Sint mollit anim laborum ut </div><div class="e-emptystate__lead">Aliqua nostrud quis voluptate proident ipsum dolore dolore sit sit </div><div class="e-emptystate__button e-btn e-btn-secondary">Primary button</div></div></div></div>
Incididunt pariatur non cupidatat deserunt
Laborum in esse proident quis excepteur veniam sint elit nisi
Primary button