x
1
2
3
4
5
6
7
8
9
<div class="elevate-empty-state"> <div class="elevate-empty-state--content"> <img src="https://static.thenounproject.com/png/empty-folder-icon-6018983-512.png" role="presentation" class="elevate-empty-state--image"> <div class="elevate-empty-state--text"> <h3 class="elevate-empty-state--title">No data available</h3> <p class="elevate-empty-state--description">There is no data to display at the moment.</p> </div> </div></div>1
render Elevate::EmptyStateComponent.new(title: title, description: description, image: image)No notes provided.
| Param | Description | Input |
|---|---|---|
|
— |
|
|
|
— |
|
|
|
— |
|
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;}