Empty States

An empty state occurs when an element has no content to display. Depending on the context, it tells the user what is missing, why it is missing, and can offer guidance on next steps or alternative actions.

Code

Variants

Vertical

Create tables and figures Learn about tables and figures

Toggle dark mode

Horizontal

Create tables and figures

Toggle dark mode

Certara UI

packages/certara-ui/src/components/empty-state/empty-state.tsx

<certara-empty-state
  img=""
  headline=""
  description=""
  img-height=""
  img-width=""
  horizontal
  size="md"
>
  <span slot="actions">
    <certara-button color="brand">
      <certara-icon name="plus"></certara-icon>
      Create tables and figures
    </certara-button>
    <a href="https://help.certara.net/en/articles/9299407-viewing-figures" target="_blank" class="btn btn-link">
      Learn about tables and figures
      <certara-icon name="arrow-up-right-from-square"></certara-icon>
    </a>
  </span>
</certara-empty-state>

certara-empty-state

Properties

Property	Attribute	Description	Type	Default
description	description	Outputs text below headline	string	undefined
headline	headline	Outputs header as h1 (large) h3(default)	string	undefined
horizontal	horizontal	Toggles horizontal view	boolean	false
img	img	Path to image on filesystem	string	'welcome'
imgHeight	img-height	Height of image	number	undefined
imgWidth	img-width	Width of image	number	undefined
size	size	Outputs the .empty-state__title as an h1	"lg" | "md"	'md'
width	width	Optional width of the empty state. Accepts a value of 30rem, 370px, or any valid CSS size value.	string	undefined

Slots

Slot	Description
"actions"	Buttons, links, more content
"description-slot"	HTML slot for the description. Outputs text below headline.
"headline-slot"	HTML slot for the headline. Outputs as h1 (large) h3(default).

---

HTML

<div class="empty-state">
  <img alt="" class="empty-state__item empty-state__img" height="126" src="" width="225" />
  <div class="empty-state__message">
    <h3 class="empty-state__item empty-state__title">…</h3>
    <div class="empty-state__item empty-state__description">
      <p>…</p>
    </div>
    <div class="empty-state__item empty-state__link">
      <a href="#" class="btn btn--brand">…</a>
      <a href="#" class="btn btn-link"
        >…
        <svg class="icon" aria-hidden="true">
          <use xlink:href="/assets/svg/regular.svg#arrow-up-right-from-square"></use></svg
      ></a>
    </div>
  </div>
</div>

List

We looked high and low, but... "dad" is not here

• Check your spelling
• Try different keywords
• Try using fewer words

Primary Learn more

Toggle dark mode

HTML

<div class="empty-state">
    <img alt="" class="empty-state__item empty-state__img" src="/assets/img/empty-states/groups-missing.svg" width="105"/>
    <div class="empty-state__message">
      <h2 class="empty-state__title--no-results">
        …
        <span>
          <span class="search-query"></span> is not here
        </span>
      </h2>
      <ul class="empty-state__tips-list">
        <li class="empty-state__tips-list-item">…</li>
      </ul>
      <div class="empty-state__item empty-state__link">
        …
      </div>
    </div>
  </div>
</div>

Full page

Helpful alternative information. Try this in the meantime

Toggle dark mode

Certara UI

<certara-empty-state
  size="lg"
  img=""
  headline=""
  description=""
  img-height=""
  img-width=""
  horizontal
>
  <span slot="actions">
   …
  </span>
</certara-empty-state>

HTML

<div class="d-flex flex-column align-items-center justify-content-center">
  <div class="empty-state">
    …
    <div class="empty-state__message">
      <h1 class="empty-state__item empty-state__title--lg">…</h1>
      <div class="empty-state__item empty-state__description">
        …
      </div>
      <div class="empty-state__item empty-state__link">
        …
      </div>
    </div>
  </div>
</div>