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
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <div class="tw-callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>LIST GROUP:</strong> Bordered, divided list of rows (avatar/icon + text + trailing control)<br> <strong>VARIANTS:</strong> Base | Flush | Action (clickable) | Active | Disabled | Sm </p> <p class="tw:mb-0 tw:text-sm"> Consolidates the "white card + divided rows" shape hand-rolled across staff lists, draft-reply groups, and activity logs. Use <code>.tw-list-group</code> as a standalone bordered container; use <code>.tw-list-group-flush</code> when nesting inside an existing <code>.tw-card-body</code> so the chrome doesn't double up. Rows can be static (<code><div></code>/<code><li></code>) or actionable (<code><a></code>/<code><button></code> with <code>.tw-list-group-item-action</code>). Ported per DR-2026-12. </p> </div> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Base — standalone container</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Base:</strong> bordered, rounded, white — for a list that stands on its own, not nested in another card. </p> </div> <div class="tw-list-group"> <div class="tw-list-group-item"> <span class="tw-avatar tw-avatar-sm tw-avatar-primary tw-list-group-item-media" role="img" aria-label="Jade Adeyemi"><span>JA</span></span> <div class="tw-list-group-item-content"> <div class="tw-list-group-item-title">Jade Adeyemi</div> <div class="tw-list-group-item-description">j.adeyemi@hackney.gov.uk · Super admin</div> </div> <div class="tw-list-group-item-actions"> <span class="tw-badge tw-badge-primary-subtle tw-badge-sm">YOU</span> </div> </div> <div class="tw-list-group-item"> <span class="tw-avatar tw-avatar-sm tw-avatar-orange tw-list-group-item-media" role="img" aria-label="Sarah Bennett"><span>SB</span></span> <div class="tw-list-group-item-content"> <div class="tw-list-group-item-title">Sarah Bennett</div> <div class="tw-list-group-item-description">s.bennett@hackney.gov.uk · Admin</div> </div> <div class="tw-list-group-item-actions"> <button type="button" class="tw-btn tw-btn-sm tw-btn-soft-danger" aria-label="Remove Sarah Bennett">Remove</button> </div> </div> <div class="tw-list-group-item"> <span class="tw-avatar tw-avatar-sm tw-avatar-green tw-list-group-item-media" role="img" aria-label="Marcus Webb"><span>MW</span></span> <div class="tw-list-group-item-content"> <div class="tw-list-group-item-title">Marcus Webb</div> <div class="tw-list-group-item-description">m.webb@hackney.gov.uk · Read only</div> </div> <div class="tw-list-group-item-actions"> <button type="button" class="tw-btn tw-btn-sm tw-btn-soft-danger" aria-label="Remove Marcus Webb">Remove</button> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-list-group"><div class="tw-list-group-item">…</div></div></code> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Flush — nested in a card</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Flush:</strong> drops the outer border/radius so the list reads as part of the surrounding <code>.tw-card</code> instead of a card inside a card. </p> </div> <div class="tw-card"> <div class="tw-card-header"> <h3 class="tw-card-title">Draft replies · A-Level Business <span class="tw-badge tw-badge-secondary-subtle tw:ml-1">4 drafts</span></h3> </div> <div class="tw-card-body tw:p-0"> <div class="tw-list-group tw-list-group-flush"> <div class="tw-list-group-item"> <div class="tw-list-group-item-content"> <div class="tw:flex tw:items-center tw:justify-between tw:gap-2 tw:mb-1"> <span class="tw-list-group-item-title">Priya Sharma</span> <span class="tw-badge tw-badge-success-subtle">Draft ready</span> </div> <p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-0">Thank you so much for your interest in Sixth Form at Westfield — we'd love to tell you more about our A-Level Business scholarship criteria…</p> </div> </div> <div class="tw-list-group-item"> <div class="tw-list-group-item-content"> <div class="tw:flex tw:items-center tw:justify-between tw:gap-2 tw:mb-1"> <span class="tw-list-group-item-title">Daniel Okonkwo</span> <span class="tw-badge tw-badge-success-subtle">Draft ready</span> </div> <p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-0">It's wonderful to hear your sibling is already part of the Westfield community — we'd love to have you join us for Year 12…</p> </div> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-card-body tw:p-0"><div class="tw-list-group tw-list-group-flush">…</div></div></code> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Action — clickable rows</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Action:</strong> render the row as an <code><a></code> or <code><button></code> with <code>.tw-list-group-item-action</code> for hover/focus feedback. <code>.tw-active</code> marks the current selection (pair with <code>aria-current="true"</code>); <code>.tw-disabled</code> or a real <code>disabled</code> attribute marks an unavailable row. </p> </div> <div class="tw-list-group"> <a href="#" class="tw-list-group-item tw-list-group-item-action" aria-current="true"> <i class="fa-regular fa-inbox tw-list-group-item-media tw:text-neutral-400" aria-hidden="true"></i> <div class="tw-list-group-item-content"> <div class="tw-list-group-item-title">All enquiries</div> <div class="tw-list-group-item-description">128 records</div> </div> </a> <a href="#" class="tw-list-group-item tw-list-group-item-action tw-active" aria-current="true"> <i class="fa-regular fa-star tw-list-group-item-media" aria-hidden="true"></i> <div class="tw-list-group-item-content"> <div class="tw-list-group-item-title">Priority applicants</div> <div class="tw-list-group-item-description">14 records</div> </div> </a> <button type="button" class="tw-list-group-item tw-list-group-item-action" disabled> <i class="fa-regular fa-lock tw-list-group-item-media tw:text-neutral-400" aria-hidden="true"></i> <div class="tw-list-group-item-content"> <div class="tw-list-group-item-title">Archived (locked)</div> <div class="tw-list-group-item-description">Restore access in Settings</div> </div> </button> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><a href="#" class="tw-list-group-item tw-list-group-item-action tw-active" aria-current="true">…</a></code> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Compact (Sm)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Sm:</strong> tighter row padding and smaller type — an activity feed or audit trail with many rows. </p> </div> <ul class="tw-list-group tw-list-group-sm" role="list"> <li class="tw-list-group-item"> <span class="tw:inline-flex tw:items-center tw:justify-center tw:w-6 tw:h-6 tw:rounded-full tw:bg-green-100 tw:text-success tw-list-group-item-media"><i class="fa-regular fa-plus tw:text-body-xs" aria-hidden="true"></i></span> <span class="tw-avatar tw-avatar-sm tw-avatar-blue tw-list-group-item-media">AC</span> <div class="tw-list-group-item-content"> <span class="tw-list-group-item-title">Amelia Clarke</span> <span class="tw:text-body-xs tw:leading-body-xs tw:text-muted">now matches — Stage moved to Applicant</span> </div> <div class="tw-list-group-item-actions"> <span class="tw:text-indicator tw:leading-indicator tw:text-neutral-400">2 hours ago</span> </div> </li> <li class="tw-list-group-item"> <span class="tw:inline-flex tw:items-center tw:justify-center tw:w-6 tw:h-6 tw:rounded-full tw:bg-red-100 tw:text-danger tw-list-group-item-media"><i class="fa-regular fa-minus tw:text-body-xs" aria-hidden="true"></i></span> <span class="tw-avatar tw-avatar-sm tw-avatar-orange tw-list-group-item-media">FB</span> <div class="tw-list-group-item-content"> <span class="tw-list-group-item-title">Freya Barnes</span> <span class="tw:text-body-xs tw:leading-body-xs tw:text-muted">no longer matches — withdrew application</span> </div> <div class="tw-list-group-item-actions"> <span class="tw:text-indicator tw:leading-indicator tw:text-neutral-400">2 days ago</span> </div> </li> </ul> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><ul class="tw-list-group tw-list-group-sm" role="list"><li class="tw-list-group-item">…</li></ul></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
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <div class="tw-callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>LIST GROUP:</strong> Bordered, divided list of rows (avatar/icon + text + trailing control)<br> <strong>VARIANTS:</strong> Base | Flush | Action (clickable) | Active | Disabled | Sm </p> <p class="tw:mb-0 tw:text-sm"> Consolidates the "white card + divided rows" shape hand-rolled across staff lists, draft-reply groups, and activity logs. Use <code>.tw-list-group</code> as a standalone bordered container; use <code>.tw-list-group-flush</code> when nesting inside an existing <code>.tw-card-body</code> so the chrome doesn't double up. Rows can be static (<code><div></code>/<code><li></code>) or actionable (<code><a></code>/<code><button></code> with <code>.tw-list-group-item-action</code>). Ported per DR-2026-12. </p> </div> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Base — standalone container</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Base:</strong> bordered, rounded, white — for a list that stands on its own, not nested in another card. </p> </div> <div class="tw-list-group"> <div class="tw-list-group-item"> <span class="tw-avatar tw-avatar-sm tw-avatar-primary tw-list-group-item-media" role="img" aria-label="Jade Adeyemi"><span>JA</span></span> <div class="tw-list-group-item-content"> <div class="tw-list-group-item-title">Jade Adeyemi</div> <div class="tw-list-group-item-description">j.adeyemi@hackney.gov.uk · Super admin</div> </div> <div class="tw-list-group-item-actions"> <span class="tw-badge tw-badge-primary-subtle tw-badge-sm">YOU</span> </div> </div> <div class="tw-list-group-item"> <span class="tw-avatar tw-avatar-sm tw-avatar-orange tw-list-group-item-media" role="img" aria-label="Sarah Bennett"><span>SB</span></span> <div class="tw-list-group-item-content"> <div class="tw-list-group-item-title">Sarah Bennett</div> <div class="tw-list-group-item-description">s.bennett@hackney.gov.uk · Admin</div> </div> <div class="tw-list-group-item-actions"> <button type="button" class="tw-btn tw-btn-sm tw-btn-soft-danger" aria-label="Remove Sarah Bennett">Remove</button> </div> </div> <div class="tw-list-group-item"> <span class="tw-avatar tw-avatar-sm tw-avatar-green tw-list-group-item-media" role="img" aria-label="Marcus Webb"><span>MW</span></span> <div class="tw-list-group-item-content"> <div class="tw-list-group-item-title">Marcus Webb</div> <div class="tw-list-group-item-description">m.webb@hackney.gov.uk · Read only</div> </div> <div class="tw-list-group-item-actions"> <button type="button" class="tw-btn tw-btn-sm tw-btn-soft-danger" aria-label="Remove Marcus Webb">Remove</button> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-list-group"><div class="tw-list-group-item">…</div></div></code> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Flush — nested in a card</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Flush:</strong> drops the outer border/radius so the list reads as part of the surrounding <code>.tw-card</code> instead of a card inside a card. </p> </div> <div class="tw-card"> <div class="tw-card-header"> <h3 class="tw-card-title">Draft replies · A-Level Business <span class="tw-badge tw-badge-secondary-subtle tw:ml-1">4 drafts</span></h3> </div> <div class="tw-card-body tw:p-0"> <div class="tw-list-group tw-list-group-flush"> <div class="tw-list-group-item"> <div class="tw-list-group-item-content"> <div class="tw:flex tw:items-center tw:justify-between tw:gap-2 tw:mb-1"> <span class="tw-list-group-item-title">Priya Sharma</span> <span class="tw-badge tw-badge-success-subtle">Draft ready</span> </div> <p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-0">Thank you so much for your interest in Sixth Form at Westfield — we'd love to tell you more about our A-Level Business scholarship criteria…</p> </div> </div> <div class="tw-list-group-item"> <div class="tw-list-group-item-content"> <div class="tw:flex tw:items-center tw:justify-between tw:gap-2 tw:mb-1"> <span class="tw-list-group-item-title">Daniel Okonkwo</span> <span class="tw-badge tw-badge-success-subtle">Draft ready</span> </div> <p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-0">It's wonderful to hear your sibling is already part of the Westfield community — we'd love to have you join us for Year 12…</p> </div> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-card-body tw:p-0"><div class="tw-list-group tw-list-group-flush">…</div></div></code> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Action — clickable rows</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Action:</strong> render the row as an <code><a></code> or <code><button></code> with <code>.tw-list-group-item-action</code> for hover/focus feedback. <code>.tw-active</code> marks the current selection (pair with <code>aria-current="true"</code>); <code>.tw-disabled</code> or a real <code>disabled</code> attribute marks an unavailable row. </p> </div> <div class="tw-list-group"> <a href="#" class="tw-list-group-item tw-list-group-item-action" aria-current="true"> <i class="fa-regular fa-inbox tw-list-group-item-media tw:text-neutral-400" aria-hidden="true"></i> <div class="tw-list-group-item-content"> <div class="tw-list-group-item-title">All enquiries</div> <div class="tw-list-group-item-description">128 records</div> </div> </a> <a href="#" class="tw-list-group-item tw-list-group-item-action tw-active" aria-current="true"> <i class="fa-regular fa-star tw-list-group-item-media" aria-hidden="true"></i> <div class="tw-list-group-item-content"> <div class="tw-list-group-item-title">Priority applicants</div> <div class="tw-list-group-item-description">14 records</div> </div> </a> <button type="button" class="tw-list-group-item tw-list-group-item-action" disabled> <i class="fa-regular fa-lock tw-list-group-item-media tw:text-neutral-400" aria-hidden="true"></i> <div class="tw-list-group-item-content"> <div class="tw-list-group-item-title">Archived (locked)</div> <div class="tw-list-group-item-description">Restore access in Settings</div> </div> </button> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><a href="#" class="tw-list-group-item tw-list-group-item-action tw-active" aria-current="true">…</a></code> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Compact (Sm)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Sm:</strong> tighter row padding and smaller type — an activity feed or audit trail with many rows. </p> </div> <ul class="tw-list-group tw-list-group-sm" role="list"> <li class="tw-list-group-item"> <span class="tw:inline-flex tw:items-center tw:justify-center tw:w-6 tw:h-6 tw:rounded-full tw:bg-green-100 tw:text-success tw-list-group-item-media"><i class="fa-regular fa-plus tw:text-body-xs" aria-hidden="true"></i></span> <span class="tw-avatar tw-avatar-sm tw-avatar-blue tw-list-group-item-media">AC</span> <div class="tw-list-group-item-content"> <span class="tw-list-group-item-title">Amelia Clarke</span> <span class="tw:text-body-xs tw:leading-body-xs tw:text-muted">now matches — Stage moved to Applicant</span> </div> <div class="tw-list-group-item-actions"> <span class="tw:text-indicator tw:leading-indicator tw:text-neutral-400">2 hours ago</span> </div> </li> <li class="tw-list-group-item"> <span class="tw:inline-flex tw:items-center tw:justify-center tw:w-6 tw:h-6 tw:rounded-full tw:bg-red-100 tw:text-danger tw-list-group-item-media"><i class="fa-regular fa-minus tw:text-body-xs" aria-hidden="true"></i></span> <span class="tw-avatar tw-avatar-sm tw-avatar-orange tw-list-group-item-media">FB</span> <div class="tw-list-group-item-content"> <span class="tw-list-group-item-title">Freya Barnes</span> <span class="tw:text-body-xs tw:leading-body-xs tw:text-muted">no longer matches — withdrew application</span> </div> <div class="tw-list-group-item-actions"> <span class="tw:text-indicator tw:leading-indicator tw:text-neutral-400">2 days ago</span> </div> </li> </ul> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><ul class="tw-list-group tw-list-group-sm" role="list"><li class="tw-list-group-item">…</li></ul></code> </div> </div></div>No notes provided.
No params configured.