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
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
<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>NOTE CARD:</strong> Compact left-border-accent tw-card for pinned notes and comments<br> <strong>VARIANTS:</strong> Default | Color accents (primary, blue, green, red, orange, magenta, neutral) | Compact (.note-sm) </p> <p class="tw:mb-0 tw:text-sm"> Used in drawer panels, record sidebars, and timeline detail areas to display notes, comments, and pinned observations. Left border colour distinguishes note categories. Icon is optional and renders inline with text. </p> </div> <!-- Section 1: Default Note (with icon) --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Default Note</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Base:</strong> Left-border accent in primary colour. Icon is placed inline inside <code>.note-text</code>, flowing naturally with the text. Card has hover and focus-visible states for interactivity. Use <code><time></code> for timestamps. </p> </div> <div class="tw:max-w-lg tw:space-y-2"> <div class="tw-note" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text"> <i class="fa-regular fa-file-lines tw-note-icon"></i> Follow up required regarding scholarship inquiry. Parent expressed interest in music programme. </div> <div class="tw-note-meta">Jack Davies · <time datetime="2025-02-05">2 days ago</time></div> </div> </div> <div class="tw-note" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text"> <i class="fa-regular fa-note-sticky tw-note-icon"></i> Toured the school on 15 Jan. Very positive impression, asked about boarding options. </div> <div class="tw-note-meta">Sarah Thompson · <time datetime="2025-01-31">1 week ago</time></div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-note" tabindex="0"><div class="tw-note-content"><div class="tw-note-text"><i class="fa-regular fa-file-lines tw-note-icon"></i> Text...</div><div class="tw-note-meta">Author · <time datetime="...">...</time></div></div></div></code> </div> </div> <!-- Section 2: Without Icon --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Without Icon</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>No icon:</strong> Simply omit the <code><i></code> element. The note renders cleanly with just text and metadata. </p> </div> <div class="tw:max-w-lg tw:space-y-2"> <div class="tw-note" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text">A note without an icon — just text content and metadata.</div> <div class="tw-note-meta">Admin · <time datetime="2025-02-07T14:30">3 hours ago</time></div> </div> </div> <div class="tw-note tw-note-green" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text">Application approved after review. All documents verified and complete.</div> <div class="tw-note-meta">Registrar · <time datetime="2025-02-06">Yesterday</time></div> </div> </div> <div class="tw-note tw-note-red" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text">Missing birth certificate — requested from parent via email.</div> <div class="tw-note-meta">Admin · <time datetime="2025-02-05">2 days ago</time></div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-note"><div class="tw-note-content"><div class="tw-note-text">Text only...</div><div class="tw-note-meta">...</div></div></div></code> </div> </div> <!-- Section 3: Color Variants --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Color Variants</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Accents:</strong> Add a colour modifier class alongside <code>.note</code> to change the left-border accent. Default is primary (dark blue). Colours follow the avatar/timeline palette. </p> </div> <div class="tw:max-w-lg tw:space-y-2"> <div class="tw-note tw-note-primary" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text">Primary accent — default dark blue border.</div> <div class="tw-note-meta">Admin · <time datetime="2025-02-07T17:30">Just now</time></div> </div> </div> <div class="tw-note tw-note-blue" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text">Blue accent — email or communication related.</div> <div class="tw-note-meta">System · <time datetime="2025-02-07T16:30">1 hour ago</time></div> </div> </div> <div class="tw-note tw-note-green" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text">Green accent — positive or completed.</div> <div class="tw-note-meta">Sarah T · <time datetime="2025-02-06">Yesterday</time></div> </div> </div> <div class="tw-note tw-note-red" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text">Red accent — urgent or flagged.</div> <div class="tw-note-meta">Head of Year · <time datetime="2025-02-04">3 days ago</time></div> </div> </div> <div class="tw-note tw-note-orange" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text">Orange accent — caution or warning.</div> <div class="tw-note-meta">Registrar · <time datetime="2025-01-31">Last week</time></div> </div> </div> <div class="tw-note tw-note-magenta" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text">Magenta accent — bookmarked or categorised.</div> <div class="tw-note-meta">Admin · <time datetime="2025-01-24">2 weeks ago</time></div> </div> </div> <div class="tw-note tw-note-neutral" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text">Neutral accent — general system notes.</div> <div class="tw-note-meta">System · <time datetime="2025-01-07">1 month ago</time></div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-note tw-note-green">...</div></code> </div> </div> <!-- Section 4: Narrow Width / Text Wrapping --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Narrow Width (Text Wrapping)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Wrapping:</strong> In narrow containers, the icon stays inline on the first line while text wraps naturally below. </p> </div> <div class="tw:max-w-xs tw:space-y-2"> <div class="tw-note" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text"> <i class="fa-regular fa-file-lines tw-note-icon"></i> Parent called to discuss scholarship options for Year 7 entry. Very interested in the music programme and would like to arrange a second visit with the Head of Music before submitting the application. </div> <div class="tw-note-meta">Jack Davies · <time datetime="2025-02-05">2 days ago</time></div> </div> </div> <div class="tw-note tw-note-blue" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text"> <i class="fa-regular fa-envelope tw-note-icon"></i> Welcome email sent to parent with prospectus attached. Awaiting response regarding tour availability for next week. </div> <div class="tw-note-meta">System · <time datetime="2025-02-07T12:30">5 hours ago</time></div> </div> </div> <div class="tw-note tw-note-orange" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text">Deadline approaching — medical form still outstanding. Second reminder sent via SMS on 3 Feb. Parent acknowledged but not yet submitted.</div> <div class="tw-note-meta">Registrar · <time datetime="2025-02-06">1 day ago</time></div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> Shown at <code>max-w-xs</code> (320px) to demonstrate wrapping behaviour. </div> </div> <!-- Section 5: Compact Variant --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Compact Variant (.note-sm)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Compact:</strong> Tighter spacing and smaller text for drawer panels and narrow sidebars. Add <code>.note-sm</code> alongside <code>.note</code>. </p> </div> <div class="tw:max-w-sm tw:space-y-1.5"> <div class="tw-note tw-note-sm" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text"> <i class="fa-regular fa-file-lines tw-note-icon"></i> Compact note with icon for drawer panels with tighter spacing. </div> <div class="tw-note-meta">Jack Davies · <time datetime="2025-02-05">2 days ago</time></div> </div> </div> <div class="tw-note tw-note-sm tw-note-blue" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text">Compact blue variant without icon in a narrow container.</div> <div class="tw-note-meta">System · <time datetime="2025-02-07T12:30">5 hours ago</time></div> </div> </div> <div class="tw-note tw-note-sm tw-note-green" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text"> <i class="fa-regular fa-circle-check tw-note-icon"></i> Compact green with icon. </div> <div class="tw-note-meta">Sarah T · <time datetime="2025-02-06">Yesterday</time></div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-note tw-note-sm" tabindex="0">...</div></code> </div> </div> <!-- Section 6: In Context (Sidebar Section) --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">In Context (Sidebar Section)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Example:</strong> Typical usage inside a record sidebar with a section header and multiple notes. </p> </div> <div class="tw:max-w-md tw:p-4 tw:bg-neutral-0 tw:rounded-lg tw:border tw:border-neutral-200"> <div class="tw:flex tw:items-center tw:justify-between tw:mb-3"> <h3 class="tw-h6 tw:flex tw:items-center tw:gap-2"> <i class="fa-regular fa-note-sticky tw:text-primary-600"></i> Notes </h3> </div> <div class="tw:space-y-2"> <div class="tw-note" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text"> <i class="fa-regular fa-file-lines tw-note-icon"></i> Follow up required regarding scholarship inquiry. Parent expressed interest in music programme. </div> <div class="tw-note-meta">Jack Davies · <time datetime="2025-02-05">2 days ago</time></div> </div> </div> <div class="tw-note tw-note-blue" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text"> <i class="fa-regular fa-envelope tw-note-icon"></i> Welcome email sent with prospectus attached. </div> <div class="tw-note-meta">System · <time datetime="2025-02-07T12:30">5 hours ago</time></div> </div> </div> <div class="tw-note tw-note-green" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text">Application approved after review. All documents verified.</div> <div class="tw-note-meta">Registrar · <time datetime="2025-02-06">Yesterday</time></div> </div> </div> </div> </div> </div> <!-- Section 7: Empty State --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Empty State</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Empty:</strong> When no notes exist, show a helpful message with an optional action. </p> </div> <div class="tw:max-w-md tw:p-4 tw:bg-neutral-0 tw:rounded-lg tw:border tw:border-neutral-200"> <div class="tw:flex tw:items-center tw:justify-between tw:mb-3"> <h3 class="tw-h6 tw:flex tw:items-center tw:gap-2"> <i class="fa-regular fa-note-sticky tw:text-primary-600"></i> Notes </h3> </div> <div class="tw:text-center tw:py-6"> <p class="tw:text-neutral-500 tw:text-body-s tw:leading-body-s tw:mb-3">No notes yet</p> <button class="tw-btn tw-btn-secondary tw-btn-sm" type="button"> <i class="fa-solid fa-plus"></i> Add Note </button> </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
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
<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>NOTE CARD:</strong> Compact left-border-accent tw-card for pinned notes and comments<br> <strong>VARIANTS:</strong> Default | Color accents (primary, blue, green, red, orange, magenta, neutral) | Compact (.note-sm) </p> <p class="tw:mb-0 tw:text-sm"> Used in drawer panels, record sidebars, and timeline detail areas to display notes, comments, and pinned observations. Left border colour distinguishes note categories. Icon is optional and renders inline with text. </p> </div> <!-- Section 1: Default Note (with icon) --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Default Note</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Base:</strong> Left-border accent in primary colour. Icon is placed inline inside <code>.note-text</code>, flowing naturally with the text. Card has hover and focus-visible states for interactivity. Use <code><time></code> for timestamps. </p> </div> <div class="tw:max-w-lg tw:space-y-2"> <div class="tw-note" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text"> <i class="fa-regular fa-file-lines tw-note-icon"></i> Follow up required regarding scholarship inquiry. Parent expressed interest in music programme. </div> <div class="tw-note-meta">Jack Davies · <time datetime="2025-02-05">2 days ago</time></div> </div> </div> <div class="tw-note" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text"> <i class="fa-regular fa-note-sticky tw-note-icon"></i> Toured the school on 15 Jan. Very positive impression, asked about boarding options. </div> <div class="tw-note-meta">Sarah Thompson · <time datetime="2025-01-31">1 week ago</time></div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-note" tabindex="0"><div class="tw-note-content"><div class="tw-note-text"><i class="fa-regular fa-file-lines tw-note-icon"></i> Text...</div><div class="tw-note-meta">Author · <time datetime="...">...</time></div></div></div></code> </div> </div> <!-- Section 2: Without Icon --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Without Icon</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>No icon:</strong> Simply omit the <code><i></code> element. The note renders cleanly with just text and metadata. </p> </div> <div class="tw:max-w-lg tw:space-y-2"> <div class="tw-note" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text">A note without an icon — just text content and metadata.</div> <div class="tw-note-meta">Admin · <time datetime="2025-02-07T14:30">3 hours ago</time></div> </div> </div> <div class="tw-note tw-note-green" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text">Application approved after review. All documents verified and complete.</div> <div class="tw-note-meta">Registrar · <time datetime="2025-02-06">Yesterday</time></div> </div> </div> <div class="tw-note tw-note-red" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text">Missing birth certificate — requested from parent via email.</div> <div class="tw-note-meta">Admin · <time datetime="2025-02-05">2 days ago</time></div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-note"><div class="tw-note-content"><div class="tw-note-text">Text only...</div><div class="tw-note-meta">...</div></div></div></code> </div> </div> <!-- Section 3: Color Variants --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Color Variants</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Accents:</strong> Add a colour modifier class alongside <code>.note</code> to change the left-border accent. Default is primary (dark blue). Colours follow the avatar/timeline palette. </p> </div> <div class="tw:max-w-lg tw:space-y-2"> <div class="tw-note tw-note-primary" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text">Primary accent — default dark blue border.</div> <div class="tw-note-meta">Admin · <time datetime="2025-02-07T17:30">Just now</time></div> </div> </div> <div class="tw-note tw-note-blue" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text">Blue accent — email or communication related.</div> <div class="tw-note-meta">System · <time datetime="2025-02-07T16:30">1 hour ago</time></div> </div> </div> <div class="tw-note tw-note-green" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text">Green accent — positive or completed.</div> <div class="tw-note-meta">Sarah T · <time datetime="2025-02-06">Yesterday</time></div> </div> </div> <div class="tw-note tw-note-red" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text">Red accent — urgent or flagged.</div> <div class="tw-note-meta">Head of Year · <time datetime="2025-02-04">3 days ago</time></div> </div> </div> <div class="tw-note tw-note-orange" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text">Orange accent — caution or warning.</div> <div class="tw-note-meta">Registrar · <time datetime="2025-01-31">Last week</time></div> </div> </div> <div class="tw-note tw-note-magenta" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text">Magenta accent — bookmarked or categorised.</div> <div class="tw-note-meta">Admin · <time datetime="2025-01-24">2 weeks ago</time></div> </div> </div> <div class="tw-note tw-note-neutral" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text">Neutral accent — general system notes.</div> <div class="tw-note-meta">System · <time datetime="2025-01-07">1 month ago</time></div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-note tw-note-green">...</div></code> </div> </div> <!-- Section 4: Narrow Width / Text Wrapping --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Narrow Width (Text Wrapping)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Wrapping:</strong> In narrow containers, the icon stays inline on the first line while text wraps naturally below. </p> </div> <div class="tw:max-w-xs tw:space-y-2"> <div class="tw-note" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text"> <i class="fa-regular fa-file-lines tw-note-icon"></i> Parent called to discuss scholarship options for Year 7 entry. Very interested in the music programme and would like to arrange a second visit with the Head of Music before submitting the application. </div> <div class="tw-note-meta">Jack Davies · <time datetime="2025-02-05">2 days ago</time></div> </div> </div> <div class="tw-note tw-note-blue" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text"> <i class="fa-regular fa-envelope tw-note-icon"></i> Welcome email sent to parent with prospectus attached. Awaiting response regarding tour availability for next week. </div> <div class="tw-note-meta">System · <time datetime="2025-02-07T12:30">5 hours ago</time></div> </div> </div> <div class="tw-note tw-note-orange" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text">Deadline approaching — medical form still outstanding. Second reminder sent via SMS on 3 Feb. Parent acknowledged but not yet submitted.</div> <div class="tw-note-meta">Registrar · <time datetime="2025-02-06">1 day ago</time></div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> Shown at <code>max-w-xs</code> (320px) to demonstrate wrapping behaviour. </div> </div> <!-- Section 5: Compact Variant --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Compact Variant (.note-sm)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Compact:</strong> Tighter spacing and smaller text for drawer panels and narrow sidebars. Add <code>.note-sm</code> alongside <code>.note</code>. </p> </div> <div class="tw:max-w-sm tw:space-y-1.5"> <div class="tw-note tw-note-sm" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text"> <i class="fa-regular fa-file-lines tw-note-icon"></i> Compact note with icon for drawer panels with tighter spacing. </div> <div class="tw-note-meta">Jack Davies · <time datetime="2025-02-05">2 days ago</time></div> </div> </div> <div class="tw-note tw-note-sm tw-note-blue" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text">Compact blue variant without icon in a narrow container.</div> <div class="tw-note-meta">System · <time datetime="2025-02-07T12:30">5 hours ago</time></div> </div> </div> <div class="tw-note tw-note-sm tw-note-green" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text"> <i class="fa-regular fa-circle-check tw-note-icon"></i> Compact green with icon. </div> <div class="tw-note-meta">Sarah T · <time datetime="2025-02-06">Yesterday</time></div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-note tw-note-sm" tabindex="0">...</div></code> </div> </div> <!-- Section 6: In Context (Sidebar Section) --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">In Context (Sidebar Section)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Example:</strong> Typical usage inside a record sidebar with a section header and multiple notes. </p> </div> <div class="tw:max-w-md tw:p-4 tw:bg-neutral-0 tw:rounded-lg tw:border tw:border-neutral-200"> <div class="tw:flex tw:items-center tw:justify-between tw:mb-3"> <h3 class="tw-h6 tw:flex tw:items-center tw:gap-2"> <i class="fa-regular fa-note-sticky tw:text-primary-600"></i> Notes </h3> </div> <div class="tw:space-y-2"> <div class="tw-note" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text"> <i class="fa-regular fa-file-lines tw-note-icon"></i> Follow up required regarding scholarship inquiry. Parent expressed interest in music programme. </div> <div class="tw-note-meta">Jack Davies · <time datetime="2025-02-05">2 days ago</time></div> </div> </div> <div class="tw-note tw-note-blue" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text"> <i class="fa-regular fa-envelope tw-note-icon"></i> Welcome email sent with prospectus attached. </div> <div class="tw-note-meta">System · <time datetime="2025-02-07T12:30">5 hours ago</time></div> </div> </div> <div class="tw-note tw-note-green" tabindex="0"> <div class="tw-note-content"> <div class="tw-note-text">Application approved after review. All documents verified.</div> <div class="tw-note-meta">Registrar · <time datetime="2025-02-06">Yesterday</time></div> </div> </div> </div> </div> </div> <!-- Section 7: Empty State --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Empty State</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Empty:</strong> When no notes exist, show a helpful message with an optional action. </p> </div> <div class="tw:max-w-md tw:p-4 tw:bg-neutral-0 tw:rounded-lg tw:border tw:border-neutral-200"> <div class="tw:flex tw:items-center tw:justify-between tw:mb-3"> <h3 class="tw-h6 tw:flex tw:items-center tw:gap-2"> <i class="fa-regular fa-note-sticky tw:text-primary-600"></i> Notes </h3> </div> <div class="tw:text-center tw:py-6"> <p class="tw:text-neutral-500 tw:text-body-s tw:leading-body-s tw:mb-3">No notes yet</p> <button class="tw-btn tw-btn-secondary tw-btn-sm" type="button"> <i class="fa-solid fa-plus"></i> Add Note </button> </div> </div> </div></div>No notes provided.
No params configured.