An Empty State explains the view when it's empty.
A short explanation of this view or why it is empty. Longer texts span into multiple lines.
<div class="o-card">
<div class="o-card__body">
<div class="o-empty-state">
<div class="o-empty-state__content">
<div class="o-empty-state__title">
<h2>It's your first time here</h2>
</div>
<div class="o-empty-state__description">
<p>A short explanation of this view or why it is empty. Longer texts span into multiple lines.</p>
</div>
<div class="o-empty-state__buttons">
<button type="button" class="o-button">Continue</button>
</div>
</div>
<div class="o-empty-state__image"><img src="/images/empty-state.svg"></div>
</div>
</div>
</div>
A short explanation of this view or why it is empty. Longer texts span into multiple lines.
<div class="o-empty-state o-empty-state--no-gutter">
<div class="o-empty-state__content">
<div class="o-empty-state__title">
<h2>It's your first time here</h2>
</div>
<div class="o-empty-state__description">
<p>A short explanation of this view or why it is empty. Longer texts span into multiple lines.</p>
</div>
<div class="o-empty-state__buttons">
<button type="button" class="o-button">
Continue
</button>
</div>
</div>
<div class="o-empty-state__image"><img src="/images/empty-state.svg"></div>
</div>
Attribute | Description | Possible values | Type | Required | Default |
---|---|---|---|---|---|
no-gutter | Remove side margins. Set with .o-empty-state--no-gutter | no-gutter | String | - | - |