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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<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>STATUS TRACKER:</strong> Vertical application-status timeline<br> <strong>COMPOSES:</strong> .step-indicator (marker sizing) | state trios (marker/title color) | .small (timestamp)<br> <strong>STATES:</strong> .status-tracker-item-complete | .status-tracker-item-current | .status-tracker-item-blocked | (no modifier = upcoming) </p> <p class="tw:mb-0 tw:text-sm"> A parent/applicant's "where is my application" view — one row per milestone, connected by a vertical rail. No Stimulus controller: state is server-rendered per item. The current step carries <code>aria-current="step"</code>; markers pair color with a distinct icon or number so state never reads from color alone. </p> </div> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Application journey</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Typical flow:</strong> two completed milestones, one current (under review), one upcoming. Upcoming steps use no state modifier — <code>.step-indicator</code>'s own default neutral fill communicates "not yet reached" without extra classes. </p> </div> <div class="card tw:max-w-xl"> <div class="card-body"> <ol class="status-tracker"> <li class="status-tracker-item status-tracker-item-complete"> <span class="step-indicator status-tracker-marker" aria-hidden="true"> <i class="fa-solid fa-check" aria-hidden="true"></i> </span> <div class="tw:flex-1 tw:min-w-0"> <p class="status-tracker-title">Application submitted</p> <p class="status-tracker-meta small">12 March 2026 · 10:42am</p> <p class="status-tracker-detail">We've received Emma Thompson's Year 7 application for St Mary's Academy.</p> </div> </li> <li class="status-tracker-item status-tracker-item-complete"> <span class="step-indicator status-tracker-marker" aria-hidden="true"> <i class="fa-solid fa-check" aria-hidden="true"></i> </span> <div class="tw:flex-1 tw:min-w-0"> <p class="status-tracker-title">Documents verified</p> <p class="status-tracker-meta small">14 March 2026 · 3:15pm</p> <p class="status-tracker-detail">We checked the proof of address and birth certificate you uploaded — both are clear.</p> </div> </li> <li class="status-tracker-item status-tracker-item-current" aria-current="step"> <span class="step-indicator status-tracker-marker" aria-hidden="true">3</span> <div class="tw:flex-1 tw:min-w-0"> <p class="status-tracker-title">Under review</p> <p class="status-tracker-meta small">Started 18 March 2026</p> <p class="status-tracker-detail">The admissions panel is reviewing the application against this year's entry criteria.</p> </div> </li> <li class="status-tracker-item"> <span class="step-indicator status-tracker-marker" aria-hidden="true">4</span> <div class="tw:flex-1 tw:min-w-0"> <p class="status-tracker-title">Decision</p> <p class="status-tracker-meta small">Expected by 2 April 2026</p> <p class="status-tracker-detail">You'll get an email and a letter in the post with the outcome.</p> </div> </li> </ol> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><ol class="status-tracker"><li class="status-tracker-item status-tracker-item-complete"><span class="step-indicator status-tracker-marker" aria-hidden="true"><i class="fa-solid fa-check"></i></span><div><p class="status-tracker-title">…</p><p class="status-tracker-meta small">…</p><p class="status-tracker-detail">…</p></div></li>…<li class="status-tracker-item status-tracker-item-current" aria-current="step">…</li></ol></code> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Blocked — action needed</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Blocked step:</strong> danger-trio marker + danger-ink title, paired with an exclamation icon and a plain-language recovery action — never color alone. Steps after a blocker stay in the default "upcoming" state until it clears. The title row also carries a <code>.badge-status .badge-status-negative</code> "Action needed" pill — an optional status-badge slot for surfacing blocked items in a scanning context (e.g. a dashboard list of applications) without reading the full detail sentence. </p> </div> <div class="card tw:max-w-xl"> <div class="card-body"> <ol class="status-tracker"> <li class="status-tracker-item status-tracker-item-complete"> <span class="step-indicator status-tracker-marker" aria-hidden="true"> <i class="fa-solid fa-check" aria-hidden="true"></i> </span> <div class="tw:flex-1 tw:min-w-0"> <p class="status-tracker-title">Application submitted</p> <p class="status-tracker-meta small">2 March 2026 · 9:05am</p> <p class="status-tracker-detail">We've received Josh Patel's Year 9 in-year application for Riverside High.</p> </div> </li> <li class="status-tracker-item status-tracker-item-blocked"> <span class="step-indicator status-tracker-marker" aria-hidden="true"> <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i> </span> <div class="tw:flex-1 tw:min-w-0"> <div class="tw:flex tw:items-center tw:gap-2 tw:flex-wrap"> <p class="status-tracker-title">Action needed — missing document</p> <span class="badge-status badge-status-negative">Action needed</span> </div> <p class="status-tracker-meta small">Waiting since 6 March 2026</p> <p class="status-tracker-detail">We're missing proof of address for this application. Upload it so the panel can continue reviewing.</p> <a href="#" class="link tw:inline-flex tw:items-center tw:gap-1 tw:mt-2 tw:text-body-s tw:leading-body-s tw:font-semibold"> Upload missing document <i class="fa-regular fa-arrow-right" aria-hidden="true"></i> </a> </div> </li> <li class="status-tracker-item"> <span class="step-indicator status-tracker-marker" aria-hidden="true">3</span> <div class="tw:flex-1 tw:min-w-0"> <p class="status-tracker-title">Under review</p> <p class="status-tracker-detail">Starts once the missing document above is uploaded.</p> </div> </li> </ol> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><li class="status-tracker-item status-tracker-item-blocked"><span class="step-indicator status-tracker-marker" aria-hidden="true"><i class="fa-solid fa-triangle-exclamation"></i></span><div><div class="tw:flex tw:items-center tw:gap-2"><p class="status-tracker-title">Action needed — missing document</p><span class="badge-status badge-status-negative">Action needed</span></div><p class="status-tracker-detail">…</p><a href="#" class="tw:text-link …">Upload missing document</a></div></li></code> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Compact — no timestamps</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Compact use:</strong> for a dashboard summary widget, omit <code>.status-tracker-meta</code> entirely — no separate class is needed, the pattern composes down naturally when a row only has a title and (optionally) a detail line. </p> </div> <div class="card tw:max-w-sm"> <div class="card-body"> <ol class="status-tracker"> <li class="status-tracker-item status-tracker-item-complete"> <span class="step-indicator status-tracker-marker" aria-hidden="true"> <i class="fa-solid fa-check" aria-hidden="true"></i> </span> <div class="tw:flex-1 tw:min-w-0"> <p class="status-tracker-title">Submitted</p> </div> </li> <li class="status-tracker-item status-tracker-item-current" aria-current="step"> <span class="step-indicator status-tracker-marker" aria-hidden="true">2</span> <div class="tw:flex-1 tw:min-w-0"> <p class="status-tracker-title">Under review</p> </div> </li> <li class="status-tracker-item"> <span class="step-indicator status-tracker-marker" aria-hidden="true">3</span> <div class="tw:flex-1 tw:min-w-0"> <p class="status-tracker-title">Decision</p> </div> </li> </ol> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><li class="status-tracker-item status-tracker-item-complete"><span class="step-indicator status-tracker-marker" aria-hidden="true"><i class="fa-solid fa-check"></i></span><div><p class="status-tracker-title">Submitted</p></div></li></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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<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>STATUS TRACKER:</strong> Vertical application-status timeline<br> <strong>COMPOSES:</strong> .step-indicator (marker sizing) | state trios (marker/title color) | .small (timestamp)<br> <strong>STATES:</strong> .status-tracker-item-complete | .status-tracker-item-current | .status-tracker-item-blocked | (no modifier = upcoming) </p> <p class="tw:mb-0 tw:text-sm"> A parent/applicant's "where is my application" view — one row per milestone, connected by a vertical rail. No Stimulus controller: state is server-rendered per item. The current step carries <code>aria-current="step"</code>; markers pair color with a distinct icon or number so state never reads from color alone. </p> </div> <%# Application journey %> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Application journey</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Typical flow:</strong> two completed milestones, one current (under review), one upcoming. Upcoming steps use no state modifier — <code>.step-indicator</code>'s own default neutral fill communicates "not yet reached" without extra classes. </p> </div> <div class="card tw:max-w-xl"> <div class="card-body"> <ol class="status-tracker"> <li class="status-tracker-item status-tracker-item-complete"> <span class="step-indicator status-tracker-marker" aria-hidden="true"> <i class="fa-solid fa-check" aria-hidden="true"></i> </span> <div class="tw:flex-1 tw:min-w-0"> <p class="status-tracker-title">Application submitted</p> <p class="status-tracker-meta small">12 March 2026 · 10:42am</p> <p class="status-tracker-detail">We've received Emma Thompson's Year 7 application for St Mary's Academy.</p> </div> </li> <li class="status-tracker-item status-tracker-item-complete"> <span class="step-indicator status-tracker-marker" aria-hidden="true"> <i class="fa-solid fa-check" aria-hidden="true"></i> </span> <div class="tw:flex-1 tw:min-w-0"> <p class="status-tracker-title">Documents verified</p> <p class="status-tracker-meta small">14 March 2026 · 3:15pm</p> <p class="status-tracker-detail">We checked the proof of address and birth certificate you uploaded — both are clear.</p> </div> </li> <li class="status-tracker-item status-tracker-item-current" aria-current="step"> <span class="step-indicator status-tracker-marker" aria-hidden="true">3</span> <div class="tw:flex-1 tw:min-w-0"> <p class="status-tracker-title">Under review</p> <p class="status-tracker-meta small">Started 18 March 2026</p> <p class="status-tracker-detail">The admissions panel is reviewing the application against this year's entry criteria.</p> </div> </li> <li class="status-tracker-item"> <span class="step-indicator status-tracker-marker" aria-hidden="true">4</span> <div class="tw:flex-1 tw:min-w-0"> <p class="status-tracker-title">Decision</p> <p class="status-tracker-meta small">Expected by 2 April 2026</p> <p class="status-tracker-detail">You'll get an email and a letter in the post with the outcome.</p> </div> </li> </ol> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><ol class="status-tracker"><li class="status-tracker-item status-tracker-item-complete"><span class="step-indicator status-tracker-marker" aria-hidden="true"><i class="fa-solid fa-check"></i></span><div><p class="status-tracker-title">…</p><p class="status-tracker-meta small">…</p><p class="status-tracker-detail">…</p></div></li>…<li class="status-tracker-item status-tracker-item-current" aria-current="step">…</li></ol></code> </div> </div> <%# Blocked state with action link %> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Blocked — action needed</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Blocked step:</strong> danger-trio marker + danger-ink title, paired with an exclamation icon and a plain-language recovery action — never color alone. Steps after a blocker stay in the default "upcoming" state until it clears. The title row also carries a <code>.badge-status .badge-status-negative</code> "Action needed" pill — an optional status-badge slot for surfacing blocked items in a scanning context (e.g. a dashboard list of applications) without reading the full detail sentence. </p> </div> <div class="card tw:max-w-xl"> <div class="card-body"> <ol class="status-tracker"> <li class="status-tracker-item status-tracker-item-complete"> <span class="step-indicator status-tracker-marker" aria-hidden="true"> <i class="fa-solid fa-check" aria-hidden="true"></i> </span> <div class="tw:flex-1 tw:min-w-0"> <p class="status-tracker-title">Application submitted</p> <p class="status-tracker-meta small">2 March 2026 · 9:05am</p> <p class="status-tracker-detail">We've received Josh Patel's Year 9 in-year application for Riverside High.</p> </div> </li> <li class="status-tracker-item status-tracker-item-blocked"> <span class="step-indicator status-tracker-marker" aria-hidden="true"> <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i> </span> <div class="tw:flex-1 tw:min-w-0"> <div class="tw:flex tw:items-center tw:gap-2 tw:flex-wrap"> <p class="status-tracker-title">Action needed — missing document</p> <span class="badge-status badge-status-negative">Action needed</span> </div> <p class="status-tracker-meta small">Waiting since 6 March 2026</p> <p class="status-tracker-detail">We're missing proof of address for this application. Upload it so the panel can continue reviewing.</p> <a href="#" class="link tw:inline-flex tw:items-center tw:gap-1 tw:mt-2 tw:text-body-s tw:leading-body-s tw:font-semibold"> Upload missing document <i class="fa-regular fa-arrow-right" aria-hidden="true"></i> </a> </div> </li> <li class="status-tracker-item"> <span class="step-indicator status-tracker-marker" aria-hidden="true">3</span> <div class="tw:flex-1 tw:min-w-0"> <p class="status-tracker-title">Under review</p> <p class="status-tracker-detail">Starts once the missing document above is uploaded.</p> </div> </li> </ol> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><li class="status-tracker-item status-tracker-item-blocked"><span class="step-indicator status-tracker-marker" aria-hidden="true"><i class="fa-solid fa-triangle-exclamation"></i></span><div><div class="tw:flex tw:items-center tw:gap-2"><p class="status-tracker-title">Action needed — missing document</p><span class="badge-status badge-status-negative">Action needed</span></div><p class="status-tracker-detail">…</p><a href="#" class="tw:text-link …">Upload missing document</a></div></li></code> </div> </div> <%# Compact, meta-less variant %> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Compact — no timestamps</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Compact use:</strong> for a dashboard summary widget, omit <code>.status-tracker-meta</code> entirely — no separate class is needed, the pattern composes down naturally when a row only has a title and (optionally) a detail line. </p> </div> <div class="card tw:max-w-sm"> <div class="card-body"> <ol class="status-tracker"> <li class="status-tracker-item status-tracker-item-complete"> <span class="step-indicator status-tracker-marker" aria-hidden="true"> <i class="fa-solid fa-check" aria-hidden="true"></i> </span> <div class="tw:flex-1 tw:min-w-0"> <p class="status-tracker-title">Submitted</p> </div> </li> <li class="status-tracker-item status-tracker-item-current" aria-current="step"> <span class="step-indicator status-tracker-marker" aria-hidden="true">2</span> <div class="tw:flex-1 tw:min-w-0"> <p class="status-tracker-title">Under review</p> </div> </li> <li class="status-tracker-item"> <span class="step-indicator status-tracker-marker" aria-hidden="true">3</span> <div class="tw:flex-1 tw:min-w-0"> <p class="status-tracker-title">Decision</p> </div> </li> </ol> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><li class="status-tracker-item status-tracker-item-complete"><span class="step-indicator status-tracker-marker" aria-hidden="true"><i class="fa-solid fa-check"></i></span><div><p class="status-tracker-title">Submitted</p></div></li></code> </div> </div></div>No notes provided.
No params configured.