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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<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>OFFER SUMMARY:</strong> Decision card for an admissions offer<br> <strong>COMPOSES:</strong> .card .card-prominent | .card-title | .school-card-initials | .info-grid | state trios | .btn-primary / .btn-danger-soft </p> <p class="tw:mb-0 tw:text-sm"> School identity, a state-coloured decision banner (offered / waitlisted / declined), key facts, an optional response-deadline strip, and accept/decline actions. No new Stimulus controller — on a real page, Accept should route through a confirm step composing the existing <code>.popup</code> component before submitting (page-level, not part of this pattern). The school name is a real <code><h3 class="card-title tw:mb-0"></code> — heading-3 tokens land at the same 16px/600-weight as the previous plain paragraph, so the look is unchanged, but assistive-tech heading navigation can now land on the card. </p> </div> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Offer made — with response deadline</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Offered state:</strong> success-trio decision banner (icon + title carry the ink color; the supporting sentence stays neutral-700, matching the existing <code>.empty-state-error</code> precedent of not tinting every line). The deadline strip uses the warning trio to draw the eye without implying anything has gone wrong. </p> </div> <div class="offer-summary card card-prominent tw:max-w-md"> <div class="card-body tw:flex tw:flex-col tw:gap-4"> <div class="offer-summary-header"> <span class="school-card-initials">SM</span> <div class="tw:min-w-0"> <h3 class="card-title tw:mb-0">St Mary's Academy</h3> <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-700 tw:mb-0">Year 7 entry · September 2026</p> </div> </div> <div class="offer-summary-decision offer-summary-decision-offered"> <i class="fa-solid fa-circle-check tw:text-lg tw:mt-0.5" aria-hidden="true"></i> <div class="tw:min-w-0"> <p class="tw:font-semibold tw:mb-0.5">Offer made</p> <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-700 tw:mb-0">Congratulations — St Mary's Academy has offered Emma Thompson a place for Year 7 entry.</p> </div> </div> <div class="offer-summary-details info-grid"> <div> <p class="info-grid-label">Applicant</p> <p class="info-grid-value">Emma Thompson</p> </div> <div> <p class="info-grid-label">Year group</p> <p class="info-grid-value">Year 7</p> </div> <div> <p class="info-grid-label">Start date</p> <p class="info-grid-value">1 September 2026</p> </div> <div> <p class="info-grid-label">Offer reference</p> <p class="info-grid-value">SMA-2026-04821</p> </div> </div> <p class="offer-summary-deadline"> <i class="fa-regular fa-clock" aria-hidden="true"></i> Respond by <strong>2 April 2026</strong> to secure this place. </p> <div class="offer-summary-actions"> <button class="btn btn-primary" type="button">Accept offer</button> <button class="btn btn-danger-soft" type="button">Decline offer</button> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="offer-summary card card-prominent"><div class="card-body tw:flex tw:flex-col tw:gap-4"><div class="offer-summary-header"><span class="school-card-initials">SM</span>…</div><div class="offer-summary-decision offer-summary-decision-offered">…</div><div class="offer-summary-details info-grid">…</div><p class="offer-summary-deadline">…</p><div class="offer-summary-actions"><button class="btn btn-primary">Accept offer</button><button class="btn btn-danger-soft">Decline offer</button></div></div></div></code> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Waitlisted</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Waitlisted state:</strong> warning-trio decision banner — "pending", not an error. Actions stay available since a place may still become available. </p> </div> <div class="offer-summary card card-prominent tw:max-w-md"> <div class="card-body tw:flex tw:flex-col tw:gap-4"> <div class="offer-summary-header"> <span class="school-card-initials">RH</span> <div class="tw:min-w-0"> <h3 class="card-title tw:mb-0">Riverside High</h3> <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-700 tw:mb-0">Year 9 in-year entry</p> </div> </div> <div class="offer-summary-decision offer-summary-decision-waitlisted"> <i class="fa-solid fa-hourglass-half tw:text-lg tw:mt-0.5" aria-hidden="true"></i> <div class="tw:min-w-0"> <p class="tw:font-semibold tw:mb-0.5">Waitlisted — position 4</p> <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-700 tw:mb-0">Riverside High is currently full. We'll offer a place automatically if one opens up.</p> </div> </div> <div class="offer-summary-details info-grid"> <div> <p class="info-grid-label">Applicant</p> <p class="info-grid-value">Josh Patel</p> </div> <div> <p class="info-grid-label">Year group</p> <p class="info-grid-value">Year 9</p> </div> <div> <p class="info-grid-label">Waitlist position</p> <p class="info-grid-value">4 of 12</p> </div> <div> <p class="info-grid-label">Next review</p> <p class="info-grid-value">28 March 2026</p> </div> </div> <div class="offer-summary-actions"> <button class="btn btn-secondary" type="button">Stay on waitlist</button> <button class="btn btn-danger-soft" type="button">Withdraw application</button> </div> </div> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Declined — muted, no actions</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Declined state:</strong> danger-trio decision banner, but the card carries no <code>.offer-summary-actions</code> block at all — the decision is final, so there's nothing left to accept or decline. Copy stays calm and points to a next step rather than dwelling on the refusal. </p> </div> <div class="offer-summary card card-prominent tw:max-w-md"> <div class="card-body tw:flex tw:flex-col tw:gap-4"> <div class="offer-summary-header"> <span class="school-card-initials">OP</span> <div class="tw:min-w-0"> <h3 class="card-title tw:mb-0">Oakfield Primary</h3> <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-700 tw:mb-0">Reception entry · September 2026</p> </div> </div> <div class="offer-summary-decision offer-summary-decision-declined"> <i class="fa-solid fa-circle-xmark tw:text-lg tw:mt-0.5" aria-hidden="true"></i> <div class="tw:min-w-0"> <p class="tw:font-semibold tw:mb-0.5">No place available</p> <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-700 tw:mb-0">Oakfield Primary wasn't able to offer a place this year. You can <a href="#" class="link">review your other applications</a> or <a href="#" class="link">contact the local authority</a> for support.</p> </div> </div> <div class="offer-summary-details info-grid"> <div> <p class="info-grid-label">Applicant</p> <p class="info-grid-value">Ada Osei</p> </div> <div> <p class="info-grid-label">Year group</p> <p class="info-grid-value">Reception</p> </div> <div> <p class="info-grid-label">Decision date</p> <p class="info-grid-value">16 March 2026</p> </div> <div> <p class="info-grid-label">Application reference</p> <p class="info-grid-value">OP-2026-01193</p> </div> </div> </div> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Offer with fee lines</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Fee lines:</strong> <code>.offer-summary-details</code> is a plain <code>.info-grid</code>, so extra key/value pairs (registration fee, deposit) drop in the same way as any other fact — no separate "fees" class needed. </p> </div> <div class="offer-summary card card-prominent tw:max-w-md"> <div class="card-body tw:flex tw:flex-col tw:gap-4"> <div class="offer-summary-header"> <span class="school-card-initials">GA</span> <div class="tw:min-w-0"> <h3 class="card-title tw:mb-0">Greenway Academy</h3> <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-700 tw:mb-0">Year 12 sixth form entry</p> </div> </div> <div class="offer-summary-decision offer-summary-decision-offered"> <i class="fa-solid fa-circle-check tw:text-lg tw:mt-0.5" aria-hidden="true"></i> <div class="tw:min-w-0"> <p class="tw:font-semibold tw:mb-0.5">Offer made</p> <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-700 tw:mb-0">Greenway Academy has offered Sam Wright a sixth form place, conditional on GCSE results.</p> </div> </div> <div class="offer-summary-details info-grid"> <div> <p class="info-grid-label">Applicant</p> <p class="info-grid-value">Sam Wright</p> </div> <div> <p class="info-grid-label">Course</p> <p class="info-grid-value">A-Levels: Maths, Physics, CS</p> </div> <div> <p class="info-grid-label">Registration fee</p> <p class="info-grid-value">£0 (state-funded place)</p> </div> <div> <p class="info-grid-label">Deposit due</p> <p class="info-grid-value">£50 — refundable on enrolment</p> </div> </div> <p class="offer-summary-deadline"> <i class="fa-regular fa-clock" aria-hidden="true"></i> Respond and pay the deposit by <strong>18 April 2026</strong>. </p> <div class="offer-summary-actions"> <button class="btn btn-primary" type="button">Accept offer</button> <button class="btn btn-danger-soft" type="button">Decline offer</button> </div> </div> </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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
<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>OFFER SUMMARY:</strong> Decision card for an admissions offer<br> <strong>COMPOSES:</strong> .card .card-prominent | .card-title | .school-card-initials | .info-grid | state trios | .btn-primary / .btn-danger-soft </p> <p class="tw:mb-0 tw:text-sm"> School identity, a state-coloured decision banner (offered / waitlisted / declined), key facts, an optional response-deadline strip, and accept/decline actions. No new Stimulus controller — on a real page, Accept should route through a confirm step composing the existing <code>.popup</code> component before submitting (page-level, not part of this pattern). The school name is a real <code><h3 class="card-title tw:mb-0"></code> — heading-3 tokens land at the same 16px/600-weight as the previous plain paragraph, so the look is unchanged, but assistive-tech heading navigation can now land on the card. </p> </div> <%# Offer with deadline %> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Offer made — with response deadline</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Offered state:</strong> success-trio decision banner (icon + title carry the ink color; the supporting sentence stays neutral-700, matching the existing <code>.empty-state-error</code> precedent of not tinting every line). The deadline strip uses the warning trio to draw the eye without implying anything has gone wrong. </p> </div> <div class="offer-summary card card-prominent tw:max-w-md"> <div class="card-body tw:flex tw:flex-col tw:gap-4"> <div class="offer-summary-header"> <span class="school-card-initials">SM</span> <div class="tw:min-w-0"> <h3 class="card-title tw:mb-0">St Mary's Academy</h3> <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-700 tw:mb-0">Year 7 entry · September 2026</p> </div> </div> <div class="offer-summary-decision offer-summary-decision-offered"> <i class="fa-solid fa-circle-check tw:text-lg tw:mt-0.5" aria-hidden="true"></i> <div class="tw:min-w-0"> <p class="tw:font-semibold tw:mb-0.5">Offer made</p> <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-700 tw:mb-0">Congratulations — St Mary's Academy has offered Emma Thompson a place for Year 7 entry.</p> </div> </div> <div class="offer-summary-details info-grid"> <div> <p class="info-grid-label">Applicant</p> <p class="info-grid-value">Emma Thompson</p> </div> <div> <p class="info-grid-label">Year group</p> <p class="info-grid-value">Year 7</p> </div> <div> <p class="info-grid-label">Start date</p> <p class="info-grid-value">1 September 2026</p> </div> <div> <p class="info-grid-label">Offer reference</p> <p class="info-grid-value">SMA-2026-04821</p> </div> </div> <p class="offer-summary-deadline"> <i class="fa-regular fa-clock" aria-hidden="true"></i> Respond by <strong>2 April 2026</strong> to secure this place. </p> <div class="offer-summary-actions"> <button class="btn btn-primary" type="button">Accept offer</button> <button class="btn btn-danger-soft" type="button">Decline offer</button> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="offer-summary card card-prominent"><div class="card-body tw:flex tw:flex-col tw:gap-4"><div class="offer-summary-header"><span class="school-card-initials">SM</span>…</div><div class="offer-summary-decision offer-summary-decision-offered">…</div><div class="offer-summary-details info-grid">…</div><p class="offer-summary-deadline">…</p><div class="offer-summary-actions"><button class="btn btn-primary">Accept offer</button><button class="btn btn-danger-soft">Decline offer</button></div></div></div></code> </div> </div> <%# Waitlisted %> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Waitlisted</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Waitlisted state:</strong> warning-trio decision banner — "pending", not an error. Actions stay available since a place may still become available. </p> </div> <div class="offer-summary card card-prominent tw:max-w-md"> <div class="card-body tw:flex tw:flex-col tw:gap-4"> <div class="offer-summary-header"> <span class="school-card-initials">RH</span> <div class="tw:min-w-0"> <h3 class="card-title tw:mb-0">Riverside High</h3> <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-700 tw:mb-0">Year 9 in-year entry</p> </div> </div> <div class="offer-summary-decision offer-summary-decision-waitlisted"> <i class="fa-solid fa-hourglass-half tw:text-lg tw:mt-0.5" aria-hidden="true"></i> <div class="tw:min-w-0"> <p class="tw:font-semibold tw:mb-0.5">Waitlisted — position 4</p> <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-700 tw:mb-0">Riverside High is currently full. We'll offer a place automatically if one opens up.</p> </div> </div> <div class="offer-summary-details info-grid"> <div> <p class="info-grid-label">Applicant</p> <p class="info-grid-value">Josh Patel</p> </div> <div> <p class="info-grid-label">Year group</p> <p class="info-grid-value">Year 9</p> </div> <div> <p class="info-grid-label">Waitlist position</p> <p class="info-grid-value">4 of 12</p> </div> <div> <p class="info-grid-label">Next review</p> <p class="info-grid-value">28 March 2026</p> </div> </div> <div class="offer-summary-actions"> <button class="btn btn-secondary" type="button">Stay on waitlist</button> <button class="btn btn-danger-soft" type="button">Withdraw application</button> </div> </div> </div> </div> <%# Declined, muted %> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Declined — muted, no actions</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Declined state:</strong> danger-trio decision banner, but the card carries no <code>.offer-summary-actions</code> block at all — the decision is final, so there's nothing left to accept or decline. Copy stays calm and points to a next step rather than dwelling on the refusal. </p> </div> <div class="offer-summary card card-prominent tw:max-w-md"> <div class="card-body tw:flex tw:flex-col tw:gap-4"> <div class="offer-summary-header"> <span class="school-card-initials">OP</span> <div class="tw:min-w-0"> <h3 class="card-title tw:mb-0">Oakfield Primary</h3> <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-700 tw:mb-0">Reception entry · September 2026</p> </div> </div> <div class="offer-summary-decision offer-summary-decision-declined"> <i class="fa-solid fa-circle-xmark tw:text-lg tw:mt-0.5" aria-hidden="true"></i> <div class="tw:min-w-0"> <p class="tw:font-semibold tw:mb-0.5">No place available</p> <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-700 tw:mb-0">Oakfield Primary wasn't able to offer a place this year. You can <a href="#" class="link">review your other applications</a> or <a href="#" class="link">contact the local authority</a> for support.</p> </div> </div> <div class="offer-summary-details info-grid"> <div> <p class="info-grid-label">Applicant</p> <p class="info-grid-value">Ada Osei</p> </div> <div> <p class="info-grid-label">Year group</p> <p class="info-grid-value">Reception</p> </div> <div> <p class="info-grid-label">Decision date</p> <p class="info-grid-value">16 March 2026</p> </div> <div> <p class="info-grid-label">Application reference</p> <p class="info-grid-value">OP-2026-01193</p> </div> </div> </div> </div> </div> <%# Fee lines variant %> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Offer with fee lines</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Fee lines:</strong> <code>.offer-summary-details</code> is a plain <code>.info-grid</code>, so extra key/value pairs (registration fee, deposit) drop in the same way as any other fact — no separate "fees" class needed. </p> </div> <div class="offer-summary card card-prominent tw:max-w-md"> <div class="card-body tw:flex tw:flex-col tw:gap-4"> <div class="offer-summary-header"> <span class="school-card-initials">GA</span> <div class="tw:min-w-0"> <h3 class="card-title tw:mb-0">Greenway Academy</h3> <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-700 tw:mb-0">Year 12 sixth form entry</p> </div> </div> <div class="offer-summary-decision offer-summary-decision-offered"> <i class="fa-solid fa-circle-check tw:text-lg tw:mt-0.5" aria-hidden="true"></i> <div class="tw:min-w-0"> <p class="tw:font-semibold tw:mb-0.5">Offer made</p> <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-700 tw:mb-0">Greenway Academy has offered Sam Wright a sixth form place, conditional on GCSE results.</p> </div> </div> <div class="offer-summary-details info-grid"> <div> <p class="info-grid-label">Applicant</p> <p class="info-grid-value">Sam Wright</p> </div> <div> <p class="info-grid-label">Course</p> <p class="info-grid-value">A-Levels: Maths, Physics, CS</p> </div> <div> <p class="info-grid-label">Registration fee</p> <p class="info-grid-value">£0 (state-funded place)</p> </div> <div> <p class="info-grid-label">Deposit due</p> <p class="info-grid-value">£50 — refundable on enrolment</p> </div> </div> <p class="offer-summary-deadline"> <i class="fa-regular fa-clock" aria-hidden="true"></i> Respond and pay the deposit by <strong>18 April 2026</strong>. </p> <div class="offer-summary-actions"> <button class="btn btn-primary" type="button">Accept offer</button> <button class="btn btn-danger-soft" type="button">Decline offer</button> </div> </div> </div> </div></div>No notes provided.
No params configured.