Empty State Examples
.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">
Title Goes Here
</div>
<div class="e-emptystate__lead">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit turpis quis interdum porttitor.
</div>
<div class="e-emptystate__button e-btn e-btn-primary">
Primary Action
</div>
<div class="e-emptystate__button e-btn e-btn-link">
Link Button
</div>
</div>
</div>
</div>.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">
Title Goes Here
</div>
<div class="e-emptystate__lead">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit turpis quis interdum porttitor.
</div>
<div class="e-emptystate__button e-btn e-btn-secondary">
Primary Action
</div>
<e-help-portal-link class="e-emptystate__button" article-id="fdf2e60e74c11014a81ee05ad954b102"></e-help-portal-link>
</div>
</div>
</div>.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">
Title Goes Here
</div>
<div class="e-emptystate__lead">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit turpis quis interdum porttitor.
</div>
<div class="e-emptystate__button e-btn e-btn-primary">
Primary Action
</div>
</div>
</div>
</div>.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">
Title Goes Here
</div>
<div class="e-emptystate__lead">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit turpis quis interdum porttitor.
</div>
<div class="e-emptystate__button e-btn e-btn-primary">
Primary Action
</div>
</div>
</div>
</div>.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">
Title Goes Here
</div>
<div class="e-emptystate__lead">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit turpis quis interdum porttitor.
</div>
<div class="e-emptystate__button e-btn e-btn-primary">
Primary Action
</div>
</div>
</div>
</div>.e-emptystate-error
<div style="height:400px;">
<div class="e-emptystate e-emptystate-horizontal e-emptystate-error">
<e-icon class="e-emptystate__icon" icon="picture-o"></e-icon>
<div class="e-emptystate__content">
<div class="e-emptystate__title">
Title Goes Here
</div>
<div class="e-emptystate__lead">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit turpis quis interdum porttitor.
</div>
<div class="e-emptystate__button e-btn e-btn-primary">
Primary Action
</div>
</div>
</div>
</div>.e-emptystate-warning
<div style="height:400px;">
<div class="e-emptystate e-emptystate-horizontal e-emptystate-warning">
<e-icon class="e-emptystate__icon" icon="picture-o"></e-icon>
<div class="e-emptystate__content">
<div class="e-emptystate__title">
Title Goes Here
</div>
<div class="e-emptystate__lead">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit turpis quis interdum porttitor.
</div>
<div class="e-emptystate__button e-btn e-btn-primary">
Primary Action
</div>
</div>
</div>
</div>.e-emptystate__image
<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">
Title Goes Here
</div>
<div class="e-emptystate__lead">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit turpis quis interdum porttitor.
</div>
<div class="e-emptystate__button e-btn e-btn-primary">
Primary Action
</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">
Title Goes Here
</div>
<div class="e-emptystate__lead">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit turpis quis interdum porttitor.
</div>
<div class="e-emptystate__button e-btn e-btn-primary" onclick="console.log(this.parentNode.parentNode.parentNode.parentNode.classList.add('e-hidden'))">
Hide This Overlay
</div>
</div>
</div>
</div>.e-emptystate-horizontal, .e-emptystate__image
<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">
Title Goes Here
</div>
<div class="e-emptystate__lead">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit turpis quis interdum porttitor.
</div>
<div class="e-emptystate__button e-btn e-btn-primary">
Primary Action
</div>
</div>
</div>
</div><div style="height:400px;">
<div class="e-emptystate">
<div class="e-emptystate__content">
<div class="e-emptystate__title">
Title Goes Here
</div>
<div class="e-emptystate__lead">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit turpis quis interdum porttitor.
</div>
<div class="e-emptystate__button e-btn e-btn-primary">
Primary Action
</div>
</div>
</div>
</div>