Empty State

<sl-empty-state icon="bullhorn" heading="Heading text for this empty state">
  Explainer text for this empty state, this should help the user understand what to do next.
  <div slot="action">
   <sl-button variant="primary">Primary action</sl-button>
   <sl-button variant="secondary">Secondary action</sl-button>
  </div>

<sl-empty-state heading="Icon slot empty state">
  <img slot="icon" src="/assets/images/firefox.png"/>
  Explainer text for this empty state, this should help the user understand what to do next.
</sl-empty-state>

<sl-empty-state loading heading="We are fetching your data"></sl-empty-state>

  <sl-empty-state icon="emoji-frown" heading="Present engaging content">
    <img slot="icon" src="/assets/images/empty-state-present.svg"/>
    To get started, you need to have access to at least one client account. Close this tab and try again.
    <div slot="action">
    <sl-button variant="secondary">
      <sl-icon slot="prefix" name="xmark"></sl-icon>
      Close tab
    </sl-button>
    </div>
  </sl-empty-state>

<br/><br/>

<sl-card>
  <sl-empty-state icon="emoji-frown" heading="Heading text for this empty state">
    Explainer text for this empty state, this should help the user understand what to do next.
    <div slot="action">
    <sl-button variant="primary">Primary action</sl-button>
    <sl-button variant="secondary">Secondary action</sl-button>
    </div>
  </sl-empty-state>
</sl-card>
<br/><br/>
<sl-card>
  <div slot="header">
    Table Title
  </div>
  <sl-empty-state class="xtra-padding">
    Explainer text for this empty state, this should help the user understand why there is no data in their table.
  </sl-empty-state>
</sl-card>
<style>
  .xtra-padding {
    padding: var(--sl-spacing-3x-large);
  }
</style>