Botyglot Components V0.0.1

Previews

No matching results.

x
1
2
3
4
5
6
7
8
<div class="elevate-empty-state">
  <div class="elevate-empty-state--content">
    <img src="/assets/empty-state-bc909b49.png" role="presentation" class="elevate-empty-state--image">
    <div class="elevate-empty-state--text">
      <h3 class="elevate-empty-state--title">Invite your first user</h3>
    </div>
  </div>
</div>
1
<%= elevate_empty_state(title: "Invite your first user", image: image_path("empty-state.png")) %>

No notes provided.

No params configured.

app/assets/stylesheets/components/empty_state.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.elevate-empty-state {
  @apply flex flex-col items-center justify-center p-6 rounded-lg border border-secondary-200 bg-white w-full;
}
.elevate-empty-state--content {
  @apply flex flex-col items-center justify-center gap-4;
}
.elevate-empty-state--image {
  @apply flex items-center justify-center max-w-[230px];
}
.elevate-empty-state--text {
  @apply text-center;
}
.elevate-empty-state--title {
  @apply text-lg font-medium text-secondary-700 mb-1;
}
.elevate-empty-state--description {
  @apply text-sm text-secondary-500 max-w-[600px];
}
.elevate-empty-state--actions {
  @apply flex flex-col items-center justify-center gap-2 mt-2;
}