Empty State

HTML

An Empty State explains the view when it's empty.

Inside a card

It's your first time here

A short explanation of this view or why it is empty. Longer texts span into multiple lines.

HTML
    <div class="card">
  <div class="card__body">
    <div class="empty-state">
      <div class="empty-state__content">
        <div class="empty-state__title">
          <h2>It's your first time here</h2>
        </div>

        <div class="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="empty-state__buttons">
          <button type="button" class="button">Continue</button>
        </div>
      </div>

      <div class="empty-state__image"><img src="/images/empty-state.svg"></div>
    </div>
  </div>
</div>
  

No gutter

It's your first time here

A short explanation of this view or why it is empty. Longer texts span into multiple lines.

HTML
    <div class="empty-state empty-state--no-gutter">
  <div class="empty-state__content">
    <div class="empty-state__title">
      <h2>It's your first time here</h2>
    </div>

    <div class="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="empty-state__buttons">
      <button type="button" class="button">
        Continue
      </button>
    </div>
  </div>

  <div class="empty-state__image"><img src="/images/empty-state.svg"></div>
</div>
  

Usage

Attribute Description Possible values Type Required Default
no-gutter Remove side margins. Set with .empty-state--no-gutter no-gutter String - -