Empty States | chattigo-webkit Documentation

.c-empty-state

scss

.c-empty-state {
  margin: auto;
  max-width: 232px;
  text-align: center;

  @include element('image') {
    margin-bottom: 8px;
    max-width: 180px;
  }

  @include element('title') {
    @include use-font('subheading', 'bold');
    margin-bottom: 8px;
    
    &::first-letter {
      text-transform: uppercase;
    }
  }
  
  @include element('content') {
    @include use-font('body-alt');
    color: use-color('grey', 'light');

    &::first-letter {
      text-transform: uppercase;
    }
  }

  @include element('actions') {
    margin-top: 8px;

    .c-button {
      min-width: 168px;
      width: fit-content;
    }
  }
}

componentes para los estados vacios

Svg disponibles para los empty states
- typification.svg
- agents.svg
- chats.svg
- schedule-chats.svg

Example

html

<div class="c-empty-state">
  <img class="c-empty-state__image" src="https://cdn.chattigo.com/assets/img/empty-states/typification.svg"/>
  
  <div class="c-empty-state__title">
    titulo
  </div>
  
  <div class="c-empty-state__content">
    lorem ipsum is placeholder text commonly used in the graphic, print
  </div>
  
  <div class="c-empty-state__actions">
    <a class="c-button c-button--secondary">
      Button text
    </a>
  </div>
</div>