.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>