Empty State

<div className="c-empty-state">
  <div className="c-empty-state-title">
    <span className="text-truncate-inline">
      <span className="text-truncate">No results found</span>
    </span>
  </div>
  <div className="c-empty-state-text">Sorry, there are no results found</div>
  <div className="c-empty-state-footer">
    <button className="btn btn-primary" type="button">Button</button>
  </div>
</div>

<div className="c-empty-state c-empty-state-animation">
  <div className="c-empty-state-image">
    <div className="c-empty-state-aspect-ratio">
      <img
        alt="empty-state-image"
        className="aspect-ratio-item aspect-ratio-item-fluid"
        src="/images/empty_state.svg"
      />
    </div>
  </div>
  <div className="c-empty-state-title">
    <span className="text-truncate-inline"
      ><span className="text-truncate">No results found</span></span
    >
  </div>
  <div className="c-empty-state-text">Sorry, there are no results found</div>
  <div className="c-empty-state-footer">
    <button className="btn btn-secondary" type="button">Button</button>
  </div>
</div>

<div className="c-empty-state c-empty-state-animation">
  <div className="c-empty-state-image">
    <div className="c-empty-state-aspect-ratio">
      <img
        alt="empty-state-image"
        className="aspect-ratio-item aspect-ratio-item-fluid"
        src="/images/search_state.svg"
      />
    </div>
  </div>
  <div className="c-empty-state-title">
    <span className="text-truncate-inline">
      <span className="text-truncate">No content yet</span>
    </span>
  </div>
  <div className="c-empty-state-text">
    This is a description of what the button will allow you to do
  </div>
</div>

<div className="c-empty-state c-empty-state-animation">
  <div className="c-empty-state-image">
    <div className="c-empty-state-aspect-ratio">
      <img
        alt="empty-state-image"
        className="aspect-ratio-item aspect-ratio-item-fluid"
        src="/images/success_state.svg"
      />
    </div>
  </div>
  <div className="c-empty-state-title">
    <span className="text-truncate-inline"
      ><span className="text-truncate">Hurray</span></span
    >
  </div>
  <div className="c-empty-state-text">
    You don't have more notifications to review
  </div>
</div>

<div className="c-empty-state c-empty-state-animation">
  <div className="c-empty-state-image">
    <div className="c-empty-state-aspect-ratio">
      <img
        alt="Alternative Text"
        className="aspect-ratio-item aspect-ratio-item-fluid"
        src="/images/success_state.svg"
        title="Hello World!"
      />
    </div>
  </div>
  <div className="c-empty-state-title">
    <span className="text-truncate-inline"
      ><span className="text-truncate">Hurray</span></span
    >
  </div>
  <div className="c-empty-state-text">
    You don't have more notifications to review
  </div>
</div>