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
<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>EVENT CARD:</strong> Left-border-accent tw-card for events, appointments, and calendar items<br> <strong>VARIANTS:</strong> Default (primary) | Confirmed (green) | Pending (orange) | Cancelled (red, dimmed) | Compact (.event-card-sm) </p> <p class="tw:mb-0 tw:text-sm"> Used in record sidebars and drawer panels to display upcoming events. Left border colour indicates event status. Cancelled events are visually dimmed with a strikethrough title. Uses semantic <code><time></code> element for dates. Pairs with existing badge component for status labels. </p> </div> <!-- Section 1: Default Event Card --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Default Event Card</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Base:</strong> Primary left-border accent. Contains a <code><time></code> date, event title, and meta line (clock icon + time range + optional status badge). Card has hover and focus-visible states for interactivity. </p> </div> <div class="tw:max-w-md tw:space-y-2"> <div class="tw-event-card" tabindex="0"> <time class="tw-event-card-date" datetime="2025-02-24">Mon 24 Feb 2025</time> <div class="tw-event-card-title">School Tour — Year 7 Entry</div> <div class="tw-event-card-meta"> <span><i class="fa-regular fa-clock"></i> 9:30am – 11:00am</span> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-event-card"><time class="tw-event-card-date" datetime="2025-02-24">...</time><div class="tw-event-card-title">...</div><div class="tw-event-card-meta">...</div></div></code> </div> </div> <!-- Section 2: Status Variants --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Status Variants</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Status:</strong> Add a status modifier class to change the left border colour and date text colour. Cancelled events are dimmed and title gets a strikethrough. Pair with <code>.badge</code> for inline status labels in the meta area. </p> </div> <div class="tw:max-w-md tw:space-y-2"> <!-- Confirmed --> <div class="tw-event-card tw-event-card-confirmed" tabindex="0"> <time class="tw-event-card-date" datetime="2025-02-07">Fri 7 Feb 2025</time> <div class="tw-event-card-title">School Tour — Year 2 Entry</div> <div class="tw-event-card-meta"> <span><i class="fa-regular fa-clock"></i> 9:30am – 11:00am</span> <span class="tw-badge tw-badge-success-subtle tw-badge-sm"> <i class="fa-solid fa-check"></i> Confirmed </span> </div> </div> <!-- Pending --> <div class="tw-event-card tw-event-card-pending" tabindex="0"> <time class="tw-event-card-date" datetime="2025-03-15">Sat 15 Mar 2025</time> <div class="tw-event-card-title">Open Morning</div> <div class="tw-event-card-meta"> <span><i class="fa-regular fa-clock"></i> 10:00am – 12:00pm</span> <span class="tw-badge tw-badge-warning-subtle tw-badge-sm">Pending</span> </div> </div> <!-- Cancelled --> <div class="tw-event-card tw-event-card-cancelled" tabindex="0"> <time class="tw-event-card-date" datetime="2025-03-19">Wed 19 Mar 2025</time> <div class="tw-event-card-title">Interview — Music Scholarship</div> <div class="tw-event-card-meta"> <span><i class="fa-regular fa-clock"></i> 2:00pm – 3:00pm</span> <span class="tw-badge tw-badge-danger-subtle tw-badge-sm">Cancelled</span> </div> </div> <!-- Default (primary) --> <div class="tw-event-card" tabindex="0"> <time class="tw-event-card-date" datetime="2025-04-01">Tue 1 Apr 2025</time> <div class="tw-event-card-title">Assessment Day</div> <div class="tw-event-card-meta"> <span><i class="fa-regular fa-clock"></i> 9:00am – 4:00pm</span> <span class="tw-badge tw-badge-info-subtle tw-badge-sm">Scheduled</span> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-event-card tw-event-card-confirmed">...</div></code> </div> </div> <!-- Section 3: With Actions --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">With Actions (.event-card-actions)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Actions:</strong> Place an <code>.event-card-actions</code> container inside <code>.event-card-meta</code> for inline action buttons. Actions push to the right via <code>ml-auto</code>. </p> </div> <div class="tw:max-w-md tw:space-y-2"> <div class="tw-event-card tw-event-card-confirmed" tabindex="0"> <time class="tw-event-card-date" datetime="2025-02-07">Fri 7 Feb 2025</time> <div class="tw-event-card-title">School Tour — Year 2 Entry</div> <div class="tw-event-card-meta"> <span><i class="fa-regular fa-clock"></i> 9:30am – 11:00am</span> <span class="tw-badge tw-badge-success-subtle tw-badge-sm"> <i class="fa-solid fa-check"></i> Confirmed </span> <div class="tw-event-card-actions"> <button class="tw-btn tw-btn-secondary tw-btn-sm" type="button">View</button> </div> </div> </div> <div class="tw-event-card tw-event-card-pending" tabindex="0"> <time class="tw-event-card-date" datetime="2025-03-15">Sat 15 Mar 2025</time> <div class="tw-event-card-title">Open Morning</div> <div class="tw-event-card-meta"> <span><i class="fa-regular fa-clock"></i> 10:00am – 12:00pm</span> <span class="tw-badge tw-badge-warning-subtle tw-badge-sm">Pending</span> <div class="tw-event-card-actions"> <button class="tw-btn tw-btn-secondary tw-btn-sm" type="button">Confirm</button> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-event-card-meta">...<div class="tw-event-card-actions"><button class="tw-btn tw-btn-secondary tw-btn-sm">View</button></div></div></code> </div> </div> <!-- Section 4: Compact Variant --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Compact Variant (.event-card-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. Add <code>.event-card-sm</code> alongside <code>.event-card</code>. </p> </div> <div class="tw:max-w-sm tw:space-y-1.5"> <div class="tw-event-card tw-event-card-sm tw-event-card-confirmed" tabindex="0"> <time class="tw-event-card-date" datetime="2025-02-07">Fri 7 Feb 2025</time> <div class="tw-event-card-title">School Tour — Year 2 Entry</div> <div class="tw-event-card-meta"> <span><i class="fa-regular fa-clock"></i> 9:30am – 11:00am</span> <span class="tw-badge tw-badge-success-subtle tw-badge-sm"> <i class="fa-solid fa-check"></i> Confirmed </span> </div> </div> <div class="tw-event-card tw-event-card-sm tw-event-card-pending" tabindex="0"> <time class="tw-event-card-date" datetime="2025-03-15">Sat 15 Mar 2025</time> <div class="tw-event-card-title">Open Morning</div> <div class="tw-event-card-meta"> <span><i class="fa-regular fa-clock"></i> 10:00am – 12:00pm</span> <span class="tw-badge tw-badge-warning-subtle tw-badge-sm">Pending</span> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-event-card tw-event-card-sm tw-event-card-confirmed">...</div></code> </div> </div> <!-- Section 5: 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 event cards. </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-calendar tw:text-primary-600"></i> Upcoming Events </h3> </div> <div class="tw:space-y-2"> <div class="tw-event-card tw-event-card-confirmed" tabindex="0"> <time class="tw-event-card-date" datetime="2025-02-07">Fri 7 Feb 2025</time> <div class="tw-event-card-title">School Tour — Year 2 Entry</div> <div class="tw-event-card-meta"> <span><i class="fa-regular fa-clock"></i> 9:30am – 11:00am</span> <span class="tw-badge tw-badge-success-subtle tw-badge-sm"> <i class="fa-solid fa-check"></i> Confirmed </span> </div> </div> <div class="tw-event-card tw-event-card-pending" tabindex="0"> <time class="tw-event-card-date" datetime="2025-03-15">Sat 15 Mar 2025</time> <div class="tw-event-card-title">Open Morning</div> <div class="tw-event-card-meta"> <span><i class="fa-regular fa-clock"></i> 10:00am – 12:00pm</span> <span class="tw-badge tw-badge-warning-subtle tw-badge-sm">Pending</span> </div> </div> </div> </div> </div> <!-- Section 6: 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 upcoming events 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-calendar tw:text-primary-600"></i> Upcoming Events </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 upcoming events scheduled</p> <button class="tw-btn tw-btn-secondary tw-btn-sm" type="button"> <i class="fa-solid fa-plus"></i> Schedule Event </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
<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>EVENT CARD:</strong> Left-border-accent tw-card for events, appointments, and calendar items<br> <strong>VARIANTS:</strong> Default (primary) | Confirmed (green) | Pending (orange) | Cancelled (red, dimmed) | Compact (.event-card-sm) </p> <p class="tw:mb-0 tw:text-sm"> Used in record sidebars and drawer panels to display upcoming events. Left border colour indicates event status. Cancelled events are visually dimmed with a strikethrough title. Uses semantic <code><time></code> element for dates. Pairs with existing badge component for status labels. </p> </div> <!-- Section 1: Default Event Card --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Default Event Card</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Base:</strong> Primary left-border accent. Contains a <code><time></code> date, event title, and meta line (clock icon + time range + optional status badge). Card has hover and focus-visible states for interactivity. </p> </div> <div class="tw:max-w-md tw:space-y-2"> <div class="tw-event-card" tabindex="0"> <time class="tw-event-card-date" datetime="2025-02-24">Mon 24 Feb 2025</time> <div class="tw-event-card-title">School Tour — Year 7 Entry</div> <div class="tw-event-card-meta"> <span><i class="fa-regular fa-clock"></i> 9:30am – 11:00am</span> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-event-card"><time class="tw-event-card-date" datetime="2025-02-24">...</time><div class="tw-event-card-title">...</div><div class="tw-event-card-meta">...</div></div></code> </div> </div> <!-- Section 2: Status Variants --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Status Variants</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Status:</strong> Add a status modifier class to change the left border colour and date text colour. Cancelled events are dimmed and title gets a strikethrough. Pair with <code>.badge</code> for inline status labels in the meta area. </p> </div> <div class="tw:max-w-md tw:space-y-2"> <!-- Confirmed --> <div class="tw-event-card tw-event-card-confirmed" tabindex="0"> <time class="tw-event-card-date" datetime="2025-02-07">Fri 7 Feb 2025</time> <div class="tw-event-card-title">School Tour — Year 2 Entry</div> <div class="tw-event-card-meta"> <span><i class="fa-regular fa-clock"></i> 9:30am – 11:00am</span> <span class="tw-badge tw-badge-success-subtle tw-badge-sm"> <i class="fa-solid fa-check"></i> Confirmed </span> </div> </div> <!-- Pending --> <div class="tw-event-card tw-event-card-pending" tabindex="0"> <time class="tw-event-card-date" datetime="2025-03-15">Sat 15 Mar 2025</time> <div class="tw-event-card-title">Open Morning</div> <div class="tw-event-card-meta"> <span><i class="fa-regular fa-clock"></i> 10:00am – 12:00pm</span> <span class="tw-badge tw-badge-warning-subtle tw-badge-sm">Pending</span> </div> </div> <!-- Cancelled --> <div class="tw-event-card tw-event-card-cancelled" tabindex="0"> <time class="tw-event-card-date" datetime="2025-03-19">Wed 19 Mar 2025</time> <div class="tw-event-card-title">Interview — Music Scholarship</div> <div class="tw-event-card-meta"> <span><i class="fa-regular fa-clock"></i> 2:00pm – 3:00pm</span> <span class="tw-badge tw-badge-danger-subtle tw-badge-sm">Cancelled</span> </div> </div> <!-- Default (primary) --> <div class="tw-event-card" tabindex="0"> <time class="tw-event-card-date" datetime="2025-04-01">Tue 1 Apr 2025</time> <div class="tw-event-card-title">Assessment Day</div> <div class="tw-event-card-meta"> <span><i class="fa-regular fa-clock"></i> 9:00am – 4:00pm</span> <span class="tw-badge tw-badge-info-subtle tw-badge-sm">Scheduled</span> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-event-card tw-event-card-confirmed">...</div></code> </div> </div> <!-- Section 3: With Actions --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">With Actions (.event-card-actions)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Actions:</strong> Place an <code>.event-card-actions</code> container inside <code>.event-card-meta</code> for inline action buttons. Actions push to the right via <code>ml-auto</code>. </p> </div> <div class="tw:max-w-md tw:space-y-2"> <div class="tw-event-card tw-event-card-confirmed" tabindex="0"> <time class="tw-event-card-date" datetime="2025-02-07">Fri 7 Feb 2025</time> <div class="tw-event-card-title">School Tour — Year 2 Entry</div> <div class="tw-event-card-meta"> <span><i class="fa-regular fa-clock"></i> 9:30am – 11:00am</span> <span class="tw-badge tw-badge-success-subtle tw-badge-sm"> <i class="fa-solid fa-check"></i> Confirmed </span> <div class="tw-event-card-actions"> <button class="tw-btn tw-btn-secondary tw-btn-sm" type="button">View</button> </div> </div> </div> <div class="tw-event-card tw-event-card-pending" tabindex="0"> <time class="tw-event-card-date" datetime="2025-03-15">Sat 15 Mar 2025</time> <div class="tw-event-card-title">Open Morning</div> <div class="tw-event-card-meta"> <span><i class="fa-regular fa-clock"></i> 10:00am – 12:00pm</span> <span class="tw-badge tw-badge-warning-subtle tw-badge-sm">Pending</span> <div class="tw-event-card-actions"> <button class="tw-btn tw-btn-secondary tw-btn-sm" type="button">Confirm</button> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-event-card-meta">...<div class="tw-event-card-actions"><button class="tw-btn tw-btn-secondary tw-btn-sm">View</button></div></div></code> </div> </div> <!-- Section 4: Compact Variant --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Compact Variant (.event-card-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. Add <code>.event-card-sm</code> alongside <code>.event-card</code>. </p> </div> <div class="tw:max-w-sm tw:space-y-1.5"> <div class="tw-event-card tw-event-card-sm tw-event-card-confirmed" tabindex="0"> <time class="tw-event-card-date" datetime="2025-02-07">Fri 7 Feb 2025</time> <div class="tw-event-card-title">School Tour — Year 2 Entry</div> <div class="tw-event-card-meta"> <span><i class="fa-regular fa-clock"></i> 9:30am – 11:00am</span> <span class="tw-badge tw-badge-success-subtle tw-badge-sm"> <i class="fa-solid fa-check"></i> Confirmed </span> </div> </div> <div class="tw-event-card tw-event-card-sm tw-event-card-pending" tabindex="0"> <time class="tw-event-card-date" datetime="2025-03-15">Sat 15 Mar 2025</time> <div class="tw-event-card-title">Open Morning</div> <div class="tw-event-card-meta"> <span><i class="fa-regular fa-clock"></i> 10:00am – 12:00pm</span> <span class="tw-badge tw-badge-warning-subtle tw-badge-sm">Pending</span> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-event-card tw-event-card-sm tw-event-card-confirmed">...</div></code> </div> </div> <!-- Section 5: 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 event cards. </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-calendar tw:text-primary-600"></i> Upcoming Events </h3> </div> <div class="tw:space-y-2"> <div class="tw-event-card tw-event-card-confirmed" tabindex="0"> <time class="tw-event-card-date" datetime="2025-02-07">Fri 7 Feb 2025</time> <div class="tw-event-card-title">School Tour — Year 2 Entry</div> <div class="tw-event-card-meta"> <span><i class="fa-regular fa-clock"></i> 9:30am – 11:00am</span> <span class="tw-badge tw-badge-success-subtle tw-badge-sm"> <i class="fa-solid fa-check"></i> Confirmed </span> </div> </div> <div class="tw-event-card tw-event-card-pending" tabindex="0"> <time class="tw-event-card-date" datetime="2025-03-15">Sat 15 Mar 2025</time> <div class="tw-event-card-title">Open Morning</div> <div class="tw-event-card-meta"> <span><i class="fa-regular fa-clock"></i> 10:00am – 12:00pm</span> <span class="tw-badge tw-badge-warning-subtle tw-badge-sm">Pending</span> </div> </div> </div> </div> </div> <!-- Section 6: 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 upcoming events 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-calendar tw:text-primary-600"></i> Upcoming Events </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 upcoming events scheduled</p> <button class="tw-btn tw-btn-secondary tw-btn-sm" type="button"> <i class="fa-solid fa-plus"></i> Schedule Event </button> </div> </div> </div></div>No notes provided.
No params configured.