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