Emptystate

Default
.e-emptystate

Nothing to preview
Do enim occaecat laborum aute laborum dolor aliqua in et 
<div style="height:400px">
  <div class="e-emptystate">
    <div class="e-emptystate__content">
      <div class="e-emptystate__icon">
        <e-icon icon="user" size="large"></e-icon>
      </div>
      <div class="e-emptystate__title">
        Nothing to preview
      </div>
      <div class="e-emptystate__lead">
        Nisi sunt adipiscing nulla aute id magna dolore duis amet 
      </div>
    </div>
  </div>
</div>


                        <div style="height:400px">
                          <div class="e-emptystate">
                            <div class="e-emptystate__content">
                              <div class="e-emptystate__icon">
                                <e-icon icon="user" size="large"></e-icon>
                              </div>
                              <div class="e-emptystate__title">Nothing to preview</div>
                              <div class="e-emptystate__lead">Ut elit culpa dolore consectetur pariatur in sunt anim magna 
                              </div>
                            </div>
                          </div>
                        </div>

Variations

Large
.e-emptystate-large

Nothing to preview
Lorem ullamco in eiusmod laboris elit amet commodo tempor pariatur 
<div style="height:400px">
  <div class="e-emptystate e-emptystate-large">
    <div class="e-emptystate__content">
      <div class="e-emptystate__icon">
        <e-icon icon="user" size="large"></e-icon>
      </div>
      <div class="e-emptystate__title">
        Nothing to preview
      </div>
      <div class="e-emptystate__lead">
        Consectetur do magna ullamco velit deserunt tempor enim officia in 
      </div>
    </div>
  </div>
</div>


                          <div style="height:400px">
                            <div class="e-emptystate e-emptystate-large">
                              <div class="e-emptystate__content">
                                <div class="e-emptystate__icon">
                                  <e-icon icon="user" size="large"></e-icon>
                                </div>
                                <div class="e-emptystate__title">Nothing to preview</div>
                                <div class="e-emptystate__lead">Irure pariatur occaecat excepteur deserunt quis dolor ut in in 
                                </div>
                              </div>
                            </div>
                          </div>

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 refactor(icon): use new component
Date:
()
Committer: David Gyenes
Component history