x
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>EMPTY STATE:</strong> Consistent empty/error message block<br> <strong>COMPOSES:</strong> typography tokens | .btn | Font Awesome icon </p> <p class="tw:mb-0 tw:text-sm"> Icon over title over supporting text over actions, centered. Use inside <code>.card-body</code>, table bodies, or results columns. The error variant carries the C08 copy contract: what went wrong, why + next step, recovery action. </p> </div> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Default — no data yet</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Default:</strong> clear message, suggested action, neutral tone. </p> </div> <div class="card"> <div class="card-body"> <div class="empty-state"> <i class="fa-regular fa-folder-open empty-state-icon" aria-hidden="true"></i> <h3 class="empty-state-title">No applications yet</h3> <p class="empty-state-text">Applications will appear here once families begin submitting. Invited families receive a link straight away.</p> <div class="empty-state-actions"> <button class="btn btn-primary" type="button">Invite Families</button> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="empty-state"><i class="fa-regular fa-folder-open empty-state-icon" aria-hidden="true"></i><h3 class="empty-state-title">…</h3><p class="empty-state-text">…</p><div class="empty-state-actions">…</div></div></code> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">No results — filters too narrow</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Search/filter miss:</strong> say what produced zero, offer the way back. </p> </div> <div class="card"> <div class="card-body"> <div class="empty-state"> <i class="fa-regular fa-magnifying-glass empty-state-icon" aria-hidden="true"></i> <h3 class="empty-state-title">No schools match these filters</h3> <p class="empty-state-text">Nothing within 3 miles matches "Outstanding" + "Sixth form". Try widening the distance or removing a filter.</p> <div class="empty-state-actions"> <button class="btn btn-secondary" type="button">Clear all filters</button> </div> </div> </div> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Error variant</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Error (C08 contract):</strong> what went wrong · cause + next step · recovery action. Danger ink on icon and title only; body text stays neutral for readability. </p> </div> <div class="card"> <div class="card-body"> <div class="empty-state empty-state-error" role="alert"> <i class="fa-regular fa-cloud-exclamation empty-state-icon" aria-hidden="true"></i> <h3 class="empty-state-title">We couldn't load your applications</h3> <p class="empty-state-text">The connection timed out before the list arrived. Your data is safe — try again, and contact support if it keeps happening.</p> <div class="empty-state-actions"> <button class="btn btn-primary" type="button">Try again</button> <button class="btn btn-secondary" type="button">Contact support</button> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="empty-state empty-state-error" role="alert">…</div></code> </div> </div></div>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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <%# Introductory callout %> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>EMPTY STATE:</strong> Consistent empty/error message block<br> <strong>COMPOSES:</strong> typography tokens | .btn | Font Awesome icon </p> <p class="tw:mb-0 tw:text-sm"> Icon over title over supporting text over actions, centered. Use inside <code>.card-body</code>, table bodies, or results columns. The error variant carries the C08 copy contract: what went wrong, why + next step, recovery action. </p> </div> <%# Default %> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Default — no data yet</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Default:</strong> clear message, suggested action, neutral tone. </p> </div> <div class="card"> <div class="card-body"> <div class="empty-state"> <i class="fa-regular fa-folder-open empty-state-icon" aria-hidden="true"></i> <h3 class="empty-state-title">No applications yet</h3> <p class="empty-state-text">Applications will appear here once families begin submitting. Invited families receive a link straight away.</p> <div class="empty-state-actions"> <button class="btn btn-primary" type="button">Invite Families</button> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="empty-state"><i class="fa-regular fa-folder-open empty-state-icon" aria-hidden="true"></i><h3 class="empty-state-title">…</h3><p class="empty-state-text">…</p><div class="empty-state-actions">…</div></div></code> </div> </div> <%# Filtered-to-nothing %> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">No results — filters too narrow</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Search/filter miss:</strong> say what produced zero, offer the way back. </p> </div> <div class="card"> <div class="card-body"> <div class="empty-state"> <i class="fa-regular fa-magnifying-glass empty-state-icon" aria-hidden="true"></i> <h3 class="empty-state-title">No schools match these filters</h3> <p class="empty-state-text">Nothing within 3 miles matches "Outstanding" + "Sixth form". Try widening the distance or removing a filter.</p> <div class="empty-state-actions"> <button class="btn btn-secondary" type="button">Clear all filters</button> </div> </div> </div> </div> </div> <%# Error variant %> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Error variant</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Error (C08 contract):</strong> what went wrong · cause + next step · recovery action. Danger ink on icon and title only; body text stays neutral for readability. </p> </div> <div class="card"> <div class="card-body"> <div class="empty-state empty-state-error" role="alert"> <i class="fa-regular fa-cloud-exclamation empty-state-icon" aria-hidden="true"></i> <h3 class="empty-state-title">We couldn't load your applications</h3> <p class="empty-state-text">The connection timed out before the list arrived. Your data is safe — try again, and contact support if it keeps happening.</p> <div class="empty-state-actions"> <button class="btn btn-primary" type="button">Try again</button> <button class="btn btn-secondary" type="button">Contact support</button> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="empty-state empty-state-error" role="alert">…</div></code> </div> </div></div>No notes provided.
No params configured.