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>

.c-empty-state-bot-list

scss

.c-empty-state-bot-list {
  @include element('image') {
    height: 100vh;
    position: absolute;
    right: -210px;
    top: 0;

    @include media-breakpoint-down(webchat) {
      right: 0;
      transform: translateX(30%);
    }
  }

  @include element('content') {
    @include use-font('body');
    color: use-color('grey', 'dark');
    display: grid;
    transform: translate(-300px, -90px);

    @include media-breakpoint-down(webchat) {
      transform: translateY(350px);
    }

    h2 {
      margin: 26px 23px;
    }

    .c-button {
      margin: 0 auto;
      text-transform: none;
    }
  }
}

Example

html

<div class="c-empty-state-bot-list">
  <div class="c-empty-state-bot-list__content">
    <h2>Crea tu primer bot</h2>
    <a class="c-button c-button--secondary">
      Comenzar
    </a>
  </div>

  <img class="c-empty-state-bot-list__image" src="https://feature-tgs-432--chattigo-webkit.netlify.app/assets/img/bot/bot-with-channels.svg"/>
</div>