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
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
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <!-- Introductory callout --> <div class="tw-callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>FOLDER RAIL:</strong> Left-hand folder navigation for library-style screens<br> <strong>COMPOSES:</strong> Badge (trailing counts) | Font Awesome icons | Menu (shares the active treatment)<br> <strong>PARTS:</strong> .tw-folder-rail | -item | -item-main | -item-icon | -chevron | -label | -sub | .tw-active </p> <p class="tw:mb-0 tw:text-sm"> Use it wherever a screen filters its list by folder — Communications templates and campaigns, Lists, Helpdesk knowledge articles, Enquiry forms. Rows are real <code><button></code> elements: they filter the list beside them, they do not navigate. The active row's blue edge and tint match <code>.tw-menu-item.tw-active</code>, so a folder rail and a settings side-nav read as one family. </p> </div> <!-- Section 1: Default rail --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Default Rail</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Anatomy:</strong> each row is a full-width button holding a <code>.tw-folder-rail-item-main</code> group (chevron + icon + truncating label) with an optional count badge pinned right. Exactly one row carries <code>.tw-active</code> and <code>aria-current="true"</code> — the folder whose contents are on screen. Leaf rows keep the chevron and hide it with <code>tw:invisible</code>, so every label sits on the same left edge as a parent's. </p> </div> <div class="tw:max-w-xs tw:bg-neutral-0 tw:rounded-lg tw:border tw:border-neutral-200 tw:py-2"> <nav class="tw-folder-rail" aria-label="Template folders"> <button class="tw-folder-rail-item tw-active" type="button" aria-current="true"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-layer-group" aria-hidden="true"></i> <span class="tw-folder-rail-label">All Templates</span> </span> <span class="tw-badge tw-badge-sm">48</span> </button> <button class="tw-folder-rail-item" type="button"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-folder" aria-hidden="true"></i> <span class="tw-folder-rail-label">Application & Admissions</span> </span> <span class="tw-badge tw-badge-sm">17</span> </button> <button class="tw-folder-rail-item" type="button"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-folder" aria-hidden="true"></i> <span class="tw-folder-rail-label">Offers & Decisions</span> </span> <span class="tw-badge tw-badge-sm">9</span> </button> <button class="tw-folder-rail-item" type="button"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-folder" aria-hidden="true"></i> <span class="tw-folder-rail-label">Enrolment</span> </span> <span class="tw-badge tw-badge-sm">12</span> </button> <button class="tw-folder-rail-item" type="button"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-folder" aria-hidden="true"></i> <span class="tw-folder-rail-label">Open Days & Events</span> </span> <span class="tw-badge tw-badge-sm">6</span> </button> <button class="tw-folder-rail-item" type="button"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-box-archive" aria-hidden="true"></i> <span class="tw-folder-rail-label">Archived</span> </span> <span class="tw-badge tw-badge-sm">4</span> </button> </nav> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><nav class="tw-folder-rail" aria-label="Template folders"><br> <button class="tw-folder-rail-item tw-active" type="button" aria-current="true"><br> <span class="tw-folder-rail-item-main"><br> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i><br> <i class="tw-folder-rail-item-icon fa-regular fa-folder" aria-hidden="true"></i><br> <span class="tw-folder-rail-label">All Templates</span><br> </span><br> <span class="tw-badge tw-badge-sm">48</span><br> </button><br> </nav></code> </div> </div> <!-- Section 2: Nested folders --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Nested Folders (One Level)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Collapsing parent:</strong> a folder with children is the same row with a visible chevron, <code>aria-expanded</code> and <code>aria-controls</code> pointing at its <code>.tw-folder-rail-sub</code> group. The chevron rotates from <code>aria-expanded="true"</code> — no extra class, no JavaScript-set styles. One nesting level only: children indent past the parent's icon column, and a deeper tree belongs in the list body, not the rail. </p> </div> <div class="tw:max-w-xs tw:bg-neutral-0 tw:rounded-lg tw:border tw:border-neutral-200 tw:py-2"> <nav class="tw-folder-rail" aria-label="Campaign folders"> <button class="tw-folder-rail-item" type="button"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-layer-group" aria-hidden="true"></i> <span class="tw-folder-rail-label">All Campaigns</span> </span> <span class="tw-badge tw-badge-sm">31</span> </button> <button class="tw-folder-rail-item" type="button" aria-expanded="true" aria-controls="folder-rail-admissions-children"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-folder-open" aria-hidden="true"></i> <span class="tw-folder-rail-label">Application & Admissions</span> </span> <span class="tw-badge tw-badge-sm">17</span> </button> <div class="tw-folder-rail-sub" id="folder-rail-admissions-children"> <button class="tw-folder-rail-item tw-active" type="button" aria-current="true"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-file-lines" aria-hidden="true"></i> <span class="tw-folder-rail-label">Year 7 September 2027</span> </span> <span class="tw-badge tw-badge-sm">8</span> </button> <button class="tw-folder-rail-item" type="button"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-file-lines" aria-hidden="true"></i> <span class="tw-folder-rail-label">Sixth Form 2027</span> </span> <span class="tw-badge tw-badge-sm">6</span> </button> <button class="tw-folder-rail-item" type="button"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-file-lines" aria-hidden="true"></i> <span class="tw-folder-rail-label">In-year transfers</span> </span> <span class="tw-badge tw-badge-sm">3</span> </button> </div> <button class="tw-folder-rail-item" type="button" aria-expanded="false" aria-controls="folder-rail-enrolment-children"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-folder" aria-hidden="true"></i> <span class="tw-folder-rail-label">Enrolment</span> </span> <span class="tw-badge tw-badge-sm">12</span> </button> <button class="tw-folder-rail-item" type="button"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-box-archive" aria-hidden="true"></i> <span class="tw-folder-rail-label">Archived</span> </span> <span class="tw-badge tw-badge-sm">4</span> </button> </nav> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><button class="tw-folder-rail-item" type="button" aria-expanded="true" aria-controls="folder-rail-admissions-children">…</button></code><br> <code><div class="tw-folder-rail-sub" id="folder-rail-admissions-children">…child rows…</div></code> </div> </div> <!-- Section 3: Rail beside its list --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Rail Beside Its List</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Placement:</strong> the rail is a fixed-width column beside a <code>tw:flex-1 tw:min-w-0</code> body — <code>min-w-0</code> is required, or a long template name in the body pushes the rail off screen. Long folder names truncate rather than wrap, which is what <code>.tw-folder-rail-label</code> is for; the count badge stays pinned right. </p> </div> <div class="tw-card"> <div class="tw-card-body tw:flex tw:gap-6"> <div class="tw:w-64 tw:shrink-0 tw:border-r tw:border-neutral-200 tw:pr-2"> <nav class="tw-folder-rail" aria-label="Knowledge base folders"> <button class="tw-folder-rail-item tw-active" type="button" aria-current="true"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-book-open" aria-hidden="true"></i> <span class="tw-folder-rail-label">Getting started with Admissions+</span> </span> <span class="tw-badge tw-badge-sm">14</span> </button> <button class="tw-folder-rail-item" type="button"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-folder" aria-hidden="true"></i> <span class="tw-folder-rail-label">Importing from your MIS</span> </span> <span class="tw-badge tw-badge-sm">7</span> </button> <button class="tw-folder-rail-item" type="button"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-folder" aria-hidden="true"></i> <span class="tw-folder-rail-label">Publishing an enquiry form to your website</span> </span> <span class="tw-badge tw-badge-sm">5</span> </button> </nav> </div> <div class="tw:flex-1 tw:min-w-0"> <h3 class="tw-h5 tw:mb-1">Getting started with Admissions+</h3> <p class="tw:text-sm tw:text-muted tw:mb-4">14 articles · last updated 4 August 2026</p> <ul class="tw-list-group tw-list-group-flush"> <li class="tw-list-group-item"> <div class="tw-list-group-item-content"> <p class="tw-list-group-item-title">Setting up your first intake</p> <p class="tw-list-group-item-description">Updated 4 Aug 2026 by Rachel Whitfield</p> </div> </li> <li class="tw-list-group-item"> <div class="tw-list-group-item-content"> <p class="tw-list-group-item-title">Inviting admissions staff and setting permissions</p> <p class="tw-list-group-item-description">Updated 28 Jul 2026 by Daniel Osei</p> </div> </li> <li class="tw-list-group-item"> <div class="tw-list-group-item-content"> <p class="tw-list-group-item-title">Sending your first open day invitation</p> <p class="tw-list-group-item-description">Updated 21 Jul 2026 by Rachel Whitfield</p> </div> </li> </ul> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw:w-64 tw:shrink-0"><nav class="tw-folder-rail">…</nav></div></code> | <code><div class="tw:flex-1 tw:min-w-0">…list…</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
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
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <!-- Introductory callout --> <div class="tw-callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>FOLDER RAIL:</strong> Left-hand folder navigation for library-style screens<br> <strong>COMPOSES:</strong> Badge (trailing counts) | Font Awesome icons | Menu (shares the active treatment)<br> <strong>PARTS:</strong> .tw-folder-rail | -item | -item-main | -item-icon | -chevron | -label | -sub | .tw-active </p> <p class="tw:mb-0 tw:text-sm"> Use it wherever a screen filters its list by folder — Communications templates and campaigns, Lists, Helpdesk knowledge articles, Enquiry forms. Rows are real <code><button></code> elements: they filter the list beside them, they do not navigate. The active row's blue edge and tint match <code>.tw-menu-item.tw-active</code>, so a folder rail and a settings side-nav read as one family. </p> </div> <!-- Section 1: Default rail --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Default Rail</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Anatomy:</strong> each row is a full-width button holding a <code>.tw-folder-rail-item-main</code> group (chevron + icon + truncating label) with an optional count badge pinned right. Exactly one row carries <code>.tw-active</code> and <code>aria-current="true"</code> — the folder whose contents are on screen. Leaf rows keep the chevron and hide it with <code>tw:invisible</code>, so every label sits on the same left edge as a parent's. </p> </div> <div class="tw:max-w-xs tw:bg-neutral-0 tw:rounded-lg tw:border tw:border-neutral-200 tw:py-2"> <nav class="tw-folder-rail" aria-label="Template folders"> <button class="tw-folder-rail-item tw-active" type="button" aria-current="true"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-layer-group" aria-hidden="true"></i> <span class="tw-folder-rail-label">All Templates</span> </span> <span class="tw-badge tw-badge-sm">48</span> </button> <button class="tw-folder-rail-item" type="button"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-folder" aria-hidden="true"></i> <span class="tw-folder-rail-label">Application & Admissions</span> </span> <span class="tw-badge tw-badge-sm">17</span> </button> <button class="tw-folder-rail-item" type="button"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-folder" aria-hidden="true"></i> <span class="tw-folder-rail-label">Offers & Decisions</span> </span> <span class="tw-badge tw-badge-sm">9</span> </button> <button class="tw-folder-rail-item" type="button"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-folder" aria-hidden="true"></i> <span class="tw-folder-rail-label">Enrolment</span> </span> <span class="tw-badge tw-badge-sm">12</span> </button> <button class="tw-folder-rail-item" type="button"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-folder" aria-hidden="true"></i> <span class="tw-folder-rail-label">Open Days & Events</span> </span> <span class="tw-badge tw-badge-sm">6</span> </button> <button class="tw-folder-rail-item" type="button"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-box-archive" aria-hidden="true"></i> <span class="tw-folder-rail-label">Archived</span> </span> <span class="tw-badge tw-badge-sm">4</span> </button> </nav> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><nav class="tw-folder-rail" aria-label="Template folders"><br> <button class="tw-folder-rail-item tw-active" type="button" aria-current="true"><br> <span class="tw-folder-rail-item-main"><br> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i><br> <i class="tw-folder-rail-item-icon fa-regular fa-folder" aria-hidden="true"></i><br> <span class="tw-folder-rail-label">All Templates</span><br> </span><br> <span class="tw-badge tw-badge-sm">48</span><br> </button><br> </nav></code> </div> </div> <!-- Section 2: Nested folders --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Nested Folders (One Level)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Collapsing parent:</strong> a folder with children is the same row with a visible chevron, <code>aria-expanded</code> and <code>aria-controls</code> pointing at its <code>.tw-folder-rail-sub</code> group. The chevron rotates from <code>aria-expanded="true"</code> — no extra class, no JavaScript-set styles. One nesting level only: children indent past the parent's icon column, and a deeper tree belongs in the list body, not the rail. </p> </div> <div class="tw:max-w-xs tw:bg-neutral-0 tw:rounded-lg tw:border tw:border-neutral-200 tw:py-2"> <nav class="tw-folder-rail" aria-label="Campaign folders"> <button class="tw-folder-rail-item" type="button"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-layer-group" aria-hidden="true"></i> <span class="tw-folder-rail-label">All Campaigns</span> </span> <span class="tw-badge tw-badge-sm">31</span> </button> <button class="tw-folder-rail-item" type="button" aria-expanded="true" aria-controls="folder-rail-admissions-children"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-folder-open" aria-hidden="true"></i> <span class="tw-folder-rail-label">Application & Admissions</span> </span> <span class="tw-badge tw-badge-sm">17</span> </button> <div class="tw-folder-rail-sub" id="folder-rail-admissions-children"> <button class="tw-folder-rail-item tw-active" type="button" aria-current="true"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-file-lines" aria-hidden="true"></i> <span class="tw-folder-rail-label">Year 7 September 2027</span> </span> <span class="tw-badge tw-badge-sm">8</span> </button> <button class="tw-folder-rail-item" type="button"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-file-lines" aria-hidden="true"></i> <span class="tw-folder-rail-label">Sixth Form 2027</span> </span> <span class="tw-badge tw-badge-sm">6</span> </button> <button class="tw-folder-rail-item" type="button"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-file-lines" aria-hidden="true"></i> <span class="tw-folder-rail-label">In-year transfers</span> </span> <span class="tw-badge tw-badge-sm">3</span> </button> </div> <button class="tw-folder-rail-item" type="button" aria-expanded="false" aria-controls="folder-rail-enrolment-children"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-folder" aria-hidden="true"></i> <span class="tw-folder-rail-label">Enrolment</span> </span> <span class="tw-badge tw-badge-sm">12</span> </button> <button class="tw-folder-rail-item" type="button"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-box-archive" aria-hidden="true"></i> <span class="tw-folder-rail-label">Archived</span> </span> <span class="tw-badge tw-badge-sm">4</span> </button> </nav> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><button class="tw-folder-rail-item" type="button" aria-expanded="true" aria-controls="folder-rail-admissions-children">…</button></code><br> <code><div class="tw-folder-rail-sub" id="folder-rail-admissions-children">…child rows…</div></code> </div> </div> <!-- Section 3: Rail beside its list --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Rail Beside Its List</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Placement:</strong> the rail is a fixed-width column beside a <code>tw:flex-1 tw:min-w-0</code> body — <code>min-w-0</code> is required, or a long template name in the body pushes the rail off screen. Long folder names truncate rather than wrap, which is what <code>.tw-folder-rail-label</code> is for; the count badge stays pinned right. </p> </div> <div class="tw-card"> <div class="tw-card-body tw:flex tw:gap-6"> <div class="tw:w-64 tw:shrink-0 tw:border-r tw:border-neutral-200 tw:pr-2"> <nav class="tw-folder-rail" aria-label="Knowledge base folders"> <button class="tw-folder-rail-item tw-active" type="button" aria-current="true"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-book-open" aria-hidden="true"></i> <span class="tw-folder-rail-label">Getting started with Admissions+</span> </span> <span class="tw-badge tw-badge-sm">14</span> </button> <button class="tw-folder-rail-item" type="button"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-folder" aria-hidden="true"></i> <span class="tw-folder-rail-label">Importing from your MIS</span> </span> <span class="tw-badge tw-badge-sm">7</span> </button> <button class="tw-folder-rail-item" type="button"> <span class="tw-folder-rail-item-main"> <i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i> <i class="tw-folder-rail-item-icon fa-regular fa-folder" aria-hidden="true"></i> <span class="tw-folder-rail-label">Publishing an enquiry form to your website</span> </span> <span class="tw-badge tw-badge-sm">5</span> </button> </nav> </div> <div class="tw:flex-1 tw:min-w-0"> <h3 class="tw-h5 tw:mb-1">Getting started with Admissions+</h3> <p class="tw:text-sm tw:text-muted tw:mb-4">14 articles · last updated 4 August 2026</p> <ul class="tw-list-group tw-list-group-flush"> <li class="tw-list-group-item"> <div class="tw-list-group-item-content"> <p class="tw-list-group-item-title">Setting up your first intake</p> <p class="tw-list-group-item-description">Updated 4 Aug 2026 by Rachel Whitfield</p> </div> </li> <li class="tw-list-group-item"> <div class="tw-list-group-item-content"> <p class="tw-list-group-item-title">Inviting admissions staff and setting permissions</p> <p class="tw-list-group-item-description">Updated 28 Jul 2026 by Daniel Osei</p> </div> </li> <li class="tw-list-group-item"> <div class="tw-list-group-item-content"> <p class="tw-list-group-item-title">Sending your first open day invitation</p> <p class="tw-list-group-item-description">Updated 21 Jul 2026 by Rachel Whitfield</p> </div> </li> </ul> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw:w-64 tw:shrink-0"><nav class="tw-folder-rail">…</nav></div></code> | <code><div class="tw:flex-1 tw:min-w-0">…list…</div></code> </div> </div></div>No notes provided.
No params configured.