Midwest Component Library v0.24.0

Previews

No matching results.

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
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
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
<div class="midwest-layout size-lg padding-default type-default" style="--layout-grid-gap: 3rem; --layout-sidebar-width: 350px">
  <div class="wrapper">
    <section class="bg-gradient-to-r from-theme-9 to-theme-7 rounded-2xl px-8 py-10 text-white">
      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <div class="flex items-center gap-2 mb-2">
            <span class="midwest-badge size-default theme-primary bg-white/20 text-white border-white/30">
              <span class="value">In-person</span>
            </span>
            <span class="midwest-badge size-default theme-primary bg-white/20 text-white border-white/30">
              <span class="value">May 22, 2026</span>
            </span>
          </div>
          <h1 class="text-3xl font-bold text-white">Midwest Design Conf</h1>
          <p class="text-theme-2 mt-1">Chicago · Navy Pier · 8:00 AM – 6:00 PM CDT</p>
        </div>
        <div class="flex flex-col sm:items-end gap-2">
          <a class="midwest-button variant-default size-default theme-primary bg-white text-theme-9 hover:bg-theme-1 font-bold" name="button" href="/">
            <span class="midwest-button-content">Register now</span>
            <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
              <div class="midwest-loading-icon-inner">
                <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
                <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
                  <circle cx="15" cy="15" r="15">
                    <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                  <circle cx="60" cy="15" r="9" fill-opacity="0.3">
                    <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                  <circle cx="105" cy="15" r="15">
                    <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                </svg>
              </div>
            </div>
          </a>
          <p class="text-xs text-theme-2">142 spots remaining</p>
        </div>
      </div>
    </section>
    <div class="flex gap-2 flex-wrap">
      <a class="midwest-button variant-default size-small theme-primary" name="button" href="/">
        <span class="midwest-button-content">Day 1 · May 22</span>
        <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
          <div class="midwest-loading-icon-inner">
            <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
            <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
              <circle cx="15" cy="15" r="15">
                <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
              </circle>
              <circle cx="60" cy="15" r="9" fill-opacity="0.3">
                <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
                <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
              </circle>
              <circle cx="105" cy="15" r="15">
                <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
              </circle>
            </svg>
          </div>
        </div>
      </a>
      <a class="midwest-button variant-outline size-small theme-primary" name="button" href="/">
        <span class="midwest-button-content">Day 2 · May 23</span>
        <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
          <div class="midwest-loading-icon-inner">
            <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
            <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
              <circle cx="15" cy="15" r="15">
                <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
              </circle>
              <circle cx="60" cy="15" r="9" fill-opacity="0.3">
                <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
                <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
              </circle>
              <circle cx="105" cy="15" r="15">
                <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
              </circle>
            </svg>
          </div>
        </div>
      </a>
      <a class="midwest-button variant-outline size-small theme-primary" name="button" href="/">
        <span class="midwest-button-content">Workshop Day · May 24</span>
        <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
          <div class="midwest-loading-icon-inner">
            <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
            <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
              <circle cx="15" cy="15" r="15">
                <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
              </circle>
              <circle cx="60" cy="15" r="9" fill-opacity="0.3">
                <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
                <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
              </circle>
              <circle cx="105" cy="15" r="15">
                <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
              </circle>
            </svg>
          </div>
        </div>
      </a>
    </div>
    <div>
      <h2 class="text-lg font-bold text-theme-12 mb-3">Day 1 Timeline</h2>
      <div class="midwest-steps is-vertical" role="tablist" aria-label="Progress steps">
        <div class="midwest-step complete">
          <button class="step-button" role="tab" aria-selected="false" type="button">
            <div class="midwest-icon " aria-hidden="true">
              <div class="midwest-icon-inner">
                <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Checkmark"><title>Checkmark</title>
                  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M416 128L192 384l-96-96"></path></svg>
              </div>
            </div>
            <span class="copy">Registration & Breakfast · 8:00 AM</span>
          </button></div>
        <div class="midwest-step complete">
          <button class="step-button" role="tab" aria-selected="false" type="button">
            <div class="midwest-icon " aria-hidden="true">
              <div class="midwest-icon-inner">
                <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Checkmark"><title>Checkmark</title>
                  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M416 128L192 384l-96-96"></path></svg>
              </div>
            </div>
            <span class="copy">Keynote: The Future of Design Systems · 9:00 AM</span>
          </button></div>
        <div class="midwest-step current">
          <button class="step-button" role="tab" aria-selected="true" aria-current="step" type="button">
            <span class="copy">Track Sessions · 10:30 AM</span>
          </button></div>
        <div class="midwest-step disabled">
          <button class="step-button" role="tab" aria-selected="false" aria-disabled="true" type="button" disabled="disabled">
            <span class="copy">Lunch & Networking · 12:30 PM</span>
          </button></div>
        <div class="midwest-step disabled">
          <button class="step-button" role="tab" aria-selected="false" aria-disabled="true" type="button" disabled="disabled">
            <span class="copy">Workshops · 1:30 PM</span>
          </button></div>
        <div class="midwest-step disabled">
          <button class="step-button" role="tab" aria-selected="false" aria-disabled="true" type="button" disabled="disabled">
            <span class="copy">Lightning Talks · 4:00 PM</span>
          </button></div>
        <div class="midwest-step disabled">
          <button class="step-button" role="tab" aria-selected="false" aria-disabled="true" type="button" disabled="disabled">
            <span class="copy">Closing Keynote · 5:00 PM</span>
          </button></div>
      </div>
    </div>
    <div>
      <div class="flex items-center justify-between mb-3">
        <h2 class="text-lg font-bold text-theme-12">Track Sessions · 10:30 AM</h2>
        <div class="flex gap-1">
          <a class="midwest-button variant-default size-small theme-primary" name="button" href="/">
            <span class="midwest-button-content">All tracks</span>
            <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
              <div class="midwest-loading-icon-inner">
                <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
                <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
                  <circle cx="15" cy="15" r="15">
                    <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                  <circle cx="60" cy="15" r="9" fill-opacity="0.3">
                    <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                  <circle cx="105" cy="15" r="15">
                    <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                </svg>
              </div>
            </div>
          </a>
          <a class="midwest-button variant-outline size-small theme-primary" name="button" href="/">
            <span class="midwest-button-content">Design</span>
            <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
              <div class="midwest-loading-icon-inner">
                <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
                <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
                  <circle cx="15" cy="15" r="15">
                    <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                  <circle cx="60" cy="15" r="9" fill-opacity="0.3">
                    <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                  <circle cx="105" cy="15" r="15">
                    <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                </svg>
              </div>
            </div>
          </a>
          <a class="midwest-button variant-outline size-small theme-primary" name="button" href="/">
            <span class="midwest-button-content">Engineering</span>
            <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
              <div class="midwest-loading-icon-inner">
                <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
                <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
                  <circle cx="15" cy="15" r="15">
                    <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                  <circle cx="60" cy="15" r="9" fill-opacity="0.3">
                    <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                  <circle cx="105" cy="15" r="15">
                    <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                </svg>
              </div>
            </div>
          </a>
          <a class="midwest-button variant-outline size-small theme-primary" name="button" href="/">
            <span class="midwest-button-content">Product</span>
            <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
              <div class="midwest-loading-icon-inner">
                <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
                <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
                  <circle cx="15" cy="15" r="15">
                    <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                  <circle cx="60" cy="15" r="9" fill-opacity="0.3">
                    <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                  <circle cx="105" cy="15" r="15">
                    <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                </svg>
              </div>
            </div>
          </a>
        </div>
      </div>
      <div class="midwest-grid" style="--grid-width: 280px; --grid-gap: 1rem">
        <article data-controller="midwest-card" class="midwest-card padding-sm">
          <div class="wrap">
            <section>
              <div class="flex items-start gap-3 mb-3">
                <div class="w-8 h-8 rounded-lg bg-theme-2 flex items-center justify-center flex-shrink-0">
                  <div class="midwest-icon text-theme-7 text-base">
                    <div class="midwest-icon-inner">
                      <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Accessibility"><title>Accessibility</title>
                        <path d="M256 112a56 56 0 1156-56 56.06 56.06 0 01-56 56z"></path><path d="M432 112.8l-.45.12-.42.13c-1 .28-2 .58-3 .89-18.61 5.46-108.93 30.92-172.56 30.92-59.13 0-141.28-22-167.56-29.47a73.79 73.79 0 00-8-2.58c-19-5-32 14.3-32 31.94 0 17.47 15.7 25.79 31.55 31.76v.28l95.22 29.74c9.73 3.73 12.33 7.54 13.6 10.84 4.13 10.59.83 31.56-.34 38.88l-5.8 45-32.19 176.19q-.15.72-.27 1.47l-.23 1.27c-2.32 16.15 9.54 31.82 32 31.82 19.6 0 28.25-13.53 32-31.94s28-157.57 42-157.57 42.84 157.57 42.84 157.57c3.75 18.41 12.4 31.94 32 31.94 22.52 0 34.38-15.74 32-31.94a57.17 57.17 0 00-.76-4.06L329 301.27l-5.79-45c-4.19-26.21-.82-34.87.32-36.9a1.09 1.09 0 00.08-.15c1.08-2 6-6.48 17.48-10.79l89.28-31.21a16.9 16.9 0 001.62-.52c16-6 32-14.3 32-31.93S451 107.81 432 112.8z"></path></svg>
                    </div>
                  </div>
                </div>
                <div class="min-w-0 flex-1">
                  <p class="text-sm font-semibold text-theme-11 leading-snug">Accessible Design at Scale</p>
                  <p class="text-xs text-theme-7 mt-0.5">Priya Nair</p>
                </div>
              </div>
              <div class="flex items-center justify-between flex-wrap gap-1.5">
                <div class="flex gap-1">
                  <span class="midwest-badge size-sm theme-primary">
                    <span class="value">Design</span>
                  </span>
                  <span variant="outline" class="midwest-badge size-sm theme-primary">
                    <span class="value">Hall A</span>
                  </span>
                </div>
                <a class="midwest-button variant-outline size-small theme-primary" name="button" href="/">
                  <span class="midwest-button-content">RSVP</span>
                  <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
                    <div class="midwest-loading-icon-inner">
                      <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
                      <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
                        <circle cx="15" cy="15" r="15">
                          <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                        <circle cx="60" cy="15" r="9" fill-opacity="0.3">
                          <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                        <circle cx="105" cy="15" r="15">
                          <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                      </svg>
                    </div>
                  </div>
                </a>
              </div>
            </section>
          </div>
        </article>
        
        <article data-controller="midwest-card" class="midwest-card padding-sm">
          <div class="wrap">
            <section>
              <div class="flex items-start gap-3 mb-3">
                <div class="w-8 h-8 rounded-lg bg-theme-2 flex items-center justify-center flex-shrink-0">
                  <div class="midwest-icon text-theme-7 text-base">
                    <div class="midwest-icon-inner">
                      <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Code"><title>Code</title>
                        <path d="M160 389a20.91 20.91 0 01-13.82-5.2l-128-112a21 21 0 010-31.6l128-112a21 21 0 0127.66 31.61L63.89 256l109.94 96.19A21 21 0 01160 389zM352 389a21 21 0 01-13.84-36.81L448.11 256l-109.94-96.19a21 21 0 0127.66-31.61l128 112a21 21 0 010 31.6l-128 112A20.89 20.89 0 01352 389z"></path></svg>
                    </div>
                  </div>
                </div>
                <div class="min-w-0 flex-1">
                  <p class="text-sm font-semibold text-theme-11 leading-snug">ViewComponent Patterns for Teams</p>
                  <p class="text-xs text-theme-7 mt-0.5">Leo Park</p>
                </div>
              </div>
              <div class="flex items-center justify-between flex-wrap gap-1.5">
                <div class="flex gap-1">
                  <span class="midwest-badge size-sm theme-primary">
                    <span class="value">Engineering</span>
                  </span>
                  <span variant="outline" class="midwest-badge size-sm theme-primary">
                    <span class="value">Hall B</span>
                  </span>
                </div>
                <a class="midwest-button variant-outline size-small theme-primary" name="button" href="/">
                  <span class="midwest-button-content">RSVP</span>
                  <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
                    <div class="midwest-loading-icon-inner">
                      <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
                      <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
                        <circle cx="15" cy="15" r="15">
                          <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                        <circle cx="60" cy="15" r="9" fill-opacity="0.3">
                          <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                        <circle cx="105" cy="15" r="15">
                          <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                      </svg>
                    </div>
                  </div>
                </a>
              </div>
            </section>
          </div>
        </article>
        
        <article data-controller="midwest-card" class="midwest-card padding-sm">
          <div class="wrap">
            <section>
              <div class="flex items-start gap-3 mb-3">
                <div class="w-8 h-8 rounded-lg bg-theme-2 flex items-center justify-center flex-shrink-0">
                  <div class="midwest-icon text-theme-7 text-base">
                    <div class="midwest-icon-inner">
                      <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="List"><title>List</title>
                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M160 144h288M160 256h288M160 368h288"></path><circle cx="80" cy="144" r="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></circle><circle cx="80" cy="256" r="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></circle><circle cx="80" cy="368" r="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></circle></svg>
                    </div>
                  </div>
                </div>
                <div class="min-w-0 flex-1">
                  <p class="text-sm font-semibold text-theme-11 leading-snug">From Research to Roadmap</p>
                  <p class="text-xs text-theme-7 mt-0.5">Ines Moreau</p>
                </div>
              </div>
              <div class="flex items-center justify-between flex-wrap gap-1.5">
                <div class="flex gap-1">
                  <span class="midwest-badge size-sm theme-primary">
                    <span class="value">Product</span>
                  </span>
                  <span variant="outline" class="midwest-badge size-sm theme-primary">
                    <span class="value">Hall C</span>
                  </span>
                </div>
                <a class="midwest-button variant-outline size-small theme-primary" name="button" href="/">
                  <span class="midwest-button-content">RSVP</span>
                  <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
                    <div class="midwest-loading-icon-inner">
                      <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
                      <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
                        <circle cx="15" cy="15" r="15">
                          <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                        <circle cx="60" cy="15" r="9" fill-opacity="0.3">
                          <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                        <circle cx="105" cy="15" r="15">
                          <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                      </svg>
                    </div>
                  </div>
                </a>
              </div>
            </section>
          </div>
        </article>
        
        <article data-controller="midwest-card" class="midwest-card padding-sm">
          <div class="wrap">
            <section>
              <div class="flex items-start gap-3 mb-3">
                <div class="w-8 h-8 rounded-lg bg-theme-2 flex items-center justify-center flex-shrink-0">
                  <div class="midwest-icon text-theme-7 text-base">
                    <div class="midwest-icon-inner">
                      <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Color palette"><title>Color palette</title>
                        <path d="M441 336.2l-.06-.05c-9.93-9.18-22.78-11.34-32.16-12.92l-.69-.12c-9.05-1.49-10.48-2.5-14.58-6.17-2.44-2.17-5.35-5.65-5.35-9.94s2.91-7.77 5.34-9.94l30.28-26.87c25.92-22.91 40.2-53.66 40.2-86.59s-14.25-63.68-40.2-86.6c-35.89-31.59-85-49-138.37-49C223.72 48 162 71.37 116 112.11c-43.87 38.77-68 90.71-68 146.24s24.16 107.47 68 146.23c21.75 19.24 47.49 34.18 76.52 44.42a266.17 266.17 0 0086.87 15h1.81c61 0 119.09-20.57 159.39-56.4 9.7-8.56 15.15-20.83 15.34-34.56.21-14.17-5.37-27.95-14.93-36.84zM112 208a32 32 0 1132 32 32 32 0 01-32-32zm40 135a32 32 0 1132-32 32 32 0 01-32 32zm40-199a32 32 0 1132 32 32 32 0 01-32-32zm64 271a48 48 0 1148-48 48 48 0 01-48 48zm72-239a32 32 0 1132-32 32 32 0 01-32 32z"></path></svg>
                    </div>
                  </div>
                </div>
                <div class="min-w-0 flex-1">
                  <p class="text-sm font-semibold text-theme-11 leading-snug">Motion Design in Production</p>
                  <p class="text-xs text-theme-7 mt-0.5">Marcus Chen</p>
                </div>
              </div>
              <div class="flex items-center justify-between flex-wrap gap-1.5">
                <div class="flex gap-1">
                  <span class="midwest-badge size-sm theme-primary">
                    <span class="value">Design</span>
                  </span>
                  <span variant="outline" class="midwest-badge size-sm theme-primary">
                    <span class="value">Hall D</span>
                  </span>
                </div>
                <a class="midwest-button variant-outline size-small theme-primary" name="button" href="/">
                  <span class="midwest-button-content">RSVP</span>
                  <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
                    <div class="midwest-loading-icon-inner">
                      <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
                      <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
                        <circle cx="15" cy="15" r="15">
                          <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                        <circle cx="60" cy="15" r="9" fill-opacity="0.3">
                          <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                        <circle cx="105" cy="15" r="15">
                          <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                      </svg>
                    </div>
                  </div>
                </a>
              </div>
            </section>
          </div>
        </article>
        
        <article data-controller="midwest-card" class="midwest-card padding-sm">
          <div class="wrap">
            <section>
              <div class="flex items-start gap-3 mb-3">
                <div class="w-8 h-8 rounded-lg bg-theme-2 flex items-center justify-center flex-shrink-0">
                  <div class="midwest-icon text-theme-7 text-base">
                    <div class="midwest-icon-inner">
                      <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Layers"><title>Layers</title>
                        <path d="M256 256c-13.47 0-26.94-2.39-37.44-7.17l-148-67.49C63.79 178.26 48 169.25 48 152.24s15.79-26 22.58-29.12l149.28-68.07c20.57-9.4 51.61-9.4 72.19 0l149.37 68.07c6.79 3.09 22.58 12.1 22.58 29.12s-15.79 26-22.58 29.11l-148 67.48C282.94 253.61 269.47 256 256 256zm176.76-100.86z"></path><path d="M441.36 226.81L426.27 220l-38.77 17.74-94 43c-10.5 4.8-24 7.19-37.44 7.19s-26.93-2.39-37.42-7.19l-94.07-43L85.79 220l-15.22 6.84C63.79 229.93 48 239 48 256s15.79 26.08 22.56 29.17l148 67.63C229 357.6 242.49 360 256 360s26.94-2.4 37.44-7.19l147.87-67.61c6.81-3.09 22.69-12.11 22.69-29.2s-15.77-26.07-22.64-29.19z"></path><path d="M441.36 330.8l-15.09-6.8-38.77 17.73-94 42.95c-10.5 4.78-24 7.18-37.44 7.18s-26.93-2.39-37.42-7.18l-94.07-43L85.79 324l-15.22 6.84C63.79 333.93 48 343 48 360s15.79 26.07 22.56 29.15l148 67.59C229 461.52 242.54 464 256 464s26.88-2.48 37.38-7.27l147.92-67.57c6.82-3.08 22.7-12.1 22.7-29.16s-15.77-26.07-22.64-29.2z"></path></svg>
                    </div>
                  </div>
                </div>
                <div class="min-w-0 flex-1">
                  <p class="text-sm font-semibold text-theme-11 leading-snug">Tailwind at Enterprise Scale</p>
                  <p class="text-xs text-theme-7 mt-0.5">Dev Patel</p>
                </div>
              </div>
              <div class="flex items-center justify-between flex-wrap gap-1.5">
                <div class="flex gap-1">
                  <span class="midwest-badge size-sm theme-primary">
                    <span class="value">Engineering</span>
                  </span>
                  <span variant="outline" class="midwest-badge size-sm theme-primary">
                    <span class="value">Hall B</span>
                  </span>
                </div>
                <a class="midwest-button variant-outline size-small theme-primary" name="button" href="/">
                  <span class="midwest-button-content">RSVP</span>
                  <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
                    <div class="midwest-loading-icon-inner">
                      <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
                      <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
                        <circle cx="15" cy="15" r="15">
                          <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                        <circle cx="60" cy="15" r="9" fill-opacity="0.3">
                          <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                        <circle cx="105" cy="15" r="15">
                          <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                      </svg>
                    </div>
                  </div>
                </a>
              </div>
            </section>
          </div>
        </article>
        
        <article data-controller="midwest-card" class="midwest-card padding-sm">
          <div class="wrap">
            <section>
              <div class="flex items-start gap-3 mb-3">
                <div class="w-8 h-8 rounded-lg bg-theme-2 flex items-center justify-center flex-shrink-0">
                  <div class="midwest-icon text-theme-7 text-base">
                    <div class="midwest-icon-inner">
                      <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Bar chart"><title>Bar chart</title>
                        <path d="M480 496H48a32 32 0 01-32-32V32a16 16 0 0132 0v432h432a16 16 0 010 32z"></path><path d="M156 432h-40a36 36 0 01-36-36V244a36 36 0 0136-36h40a36 36 0 0136 36v152a36 36 0 01-36 36zM300 432h-40a36 36 0 01-36-36V196a36 36 0 0136-36h40a36 36 0 0136 36v200a36 36 0 01-36 36zM443.64 432h-40a36 36 0 01-36-36V132a36 36 0 0136-36h40a36 36 0 0136 36v264a36 36 0 01-36 36z"></path></svg>
                    </div>
                  </div>
                </div>
                <div class="min-w-0 flex-1">
                  <p class="text-sm font-semibold text-theme-11 leading-snug">Metrics That Actually Matter</p>
                  <p class="text-xs text-theme-7 mt-0.5">Asha Williams</p>
                </div>
              </div>
              <div class="flex items-center justify-between flex-wrap gap-1.5">
                <div class="flex gap-1">
                  <span class="midwest-badge size-sm theme-primary">
                    <span class="value">Product</span>
                  </span>
                  <span variant="outline" class="midwest-badge size-sm theme-primary">
                    <span class="value">Hall C</span>
                  </span>
                </div>
                <a class="midwest-button variant-outline size-small theme-primary" name="button" href="/">
                  <span class="midwest-button-content">RSVP</span>
                  <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
                    <div class="midwest-loading-icon-inner">
                      <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
                      <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
                        <circle cx="15" cy="15" r="15">
                          <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                        <circle cx="60" cy="15" r="9" fill-opacity="0.3">
                          <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                        <circle cx="105" cy="15" r="15">
                          <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                      </svg>
                    </div>
                  </div>
                </a>
              </div>
            </section>
          </div>
        </article>
      </div>
  </div>
    <article data-controller="midwest-card" class="midwest-card">
      <div class="wrap">
        <section>
          <h3 class="text-base font-semibold text-theme-11 mb-4">Confirmed Speakers</h3>
          <div class="space-y-3">
            <div class="midwest-progress-bar size-default variant-default theme-primary">
              <div class="progress-bar-header">
                <span class="progress-bar-label">Speaker confirmations</span>
              </div>
              <div class="progress-track" role="progressbar" aria-label="Speaker confirmations" aria-valuemin="0" aria-valuemax="100" aria-valuenow="85">
                <div class="progress-fill" style="width: 85.0%"></div>
              </div>
            </div>
            <p class="text-sm text-theme-7">34 of 40 speakers confirmed. Applications close May 19.</p>
          </div>
          <div role="group" aria-label="7 avatars" class="midwest-group size-lg gap-overlap midwest-avatar-group mt-4">
            <span tooltip="Priya Nair" class="midwest-avatar size-lg theme-violet shape-square" title="You tabbed on an Avatar for Priya Nair">
              <div class="letter" title="Priya Nair">
                PN
              </div>
            </span>
            <span class="midwest-avatar size-lg theme-lime shape-square" title="You tabbed on an Avatar for Leo Park">
              <div class="letter" title="Leo Park">
                LP
              </div>
            </span>
            <span class="midwest-avatar size-lg theme-cyan shape-square" title="You tabbed on an Avatar for Ines Moreau">
              <div class="letter" title="Ines Moreau">
                IM
              </div>
            </span>
            <span class="midwest-avatar size-lg theme-blue shape-square" title="You tabbed on an Avatar for Marcus Chen">
              <div class="letter" title="Marcus Chen">
                MC
              </div>
            </span>
            <span class="midwest-avatar size-lg theme-orange shape-square" title="You tabbed on an Avatar for Dev Patel">
              <div class="letter" title="Dev Patel">
                DP
              </div>
            </span>
            <span class="midwest-avatar size-lg theme-teal shape-square" title="You tabbed on an Avatar for Asha Williams">
              <div class="letter" title="Asha Williams">
                AW
              </div>
            </span>
            <span class="midwest-avatar size-lg theme-gray shape-square" title="+28">
              <div class="letter" title="Midwest Design">
                +28
              </div>
            </span>
          </div>
        </section>
      </div>
    </article>
  </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
<%= midwest_layout(size: :lg, gap: 3) do %>
  <%# Event header %>
  <section class="bg-gradient-to-r from-theme-9 to-theme-7 rounded-2xl px-8 py-10 text-white">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
      <div>
        <div class="flex items-center gap-2 mb-2">
          <%= midwest_badge("In-person", class: "bg-white/20 text-white border-white/30") %>
          <%= midwest_badge("May 22, 2026", class: "bg-white/20 text-white border-white/30") %>
        </div>
        <h1 class="text-3xl font-bold text-white">Midwest Design Conf</h1>
        <p class="text-theme-2 mt-1">Chicago · Navy Pier · 8:00 AM – 6:00 PM CDT</p>
      </div>
      <div class="flex flex-col sm:items-end gap-2">
        <%= midwest_button("Register now", class: "bg-white text-theme-9 hover:bg-theme-1 font-bold") %>
        <p class="text-xs text-theme-2">142 spots remaining</p>
      </div>
    </div>
  </section>
  <%# Day selector %>
  <div class="flex gap-2 flex-wrap">
    <% [["Day 1 · May 22", true], ["Day 2 · May 23", false], ["Workshop Day · May 24", false]].each do |label, active| %>
      <%= midwest_button(label, size: :small, variant: active ? :default : :outline) %>
    <% end %>
  </div>
  <%# Schedule steps %>
  <div>
    <h2 class="text-lg font-bold text-theme-12 mb-3">Day 1 Timeline</h2>
    <%= midwest_steps(orientation: :vertical) do |s| %>
      <% s.with_step("Registration & Breakfast · 8:00 AM", complete: true) %>
      <% s.with_step("Keynote: The Future of Design Systems · 9:00 AM", complete: true) %>
      <% s.with_step("Track Sessions · 10:30 AM", current: true) %>
      <% s.with_step("Lunch & Networking · 12:30 PM", disabled: true) %>
      <% s.with_step("Workshops · 1:30 PM", disabled: true) %>
      <% s.with_step("Lightning Talks · 4:00 PM", disabled: true) %>
      <% s.with_step("Closing Keynote · 5:00 PM", disabled: true) %>
    <% end %>
  </div>
  <%# Session cards %>
  <div>
    <div class="flex items-center justify-between mb-3">
      <h2 class="text-lg font-bold text-theme-12">Track Sessions · 10:30 AM</h2>
      <div class="flex gap-1">
        <% [["All tracks", true], ["Design", false], ["Engineering", false], ["Product", false]].each do |t, active| %>
          <%= midwest_button(t, size: :small, variant: active ? :default : :outline) %>
        <% end %>
      </div>
    </div>
    <%= midwest_grid(width: 280, gap: 1) do %>
      <% [
        { title: "Accessible Design at Scale", speaker: "Priya Nair", track: "Design", room: "Hall A", time: "10:30", icon: :'accessibility', color: :violet },
        { title: "ViewComponent Patterns for Teams", speaker: "Leo Park", track: "Engineering", room: "Hall B", time: "10:30", icon: :code, color: :blue },
        { title: "From Research to Roadmap", speaker: "Ines Moreau", track: "Product", room: "Hall C", time: "10:30", icon: :list, color: :teal },
        { title: "Motion Design in Production", speaker: "Marcus Chen", track: "Design", room: "Hall D", time: "10:30", icon: :'color-palette', color: :pink },
        { title: "Tailwind at Enterprise Scale", speaker: "Dev Patel", track: "Engineering", room: "Hall B", time: "10:30", icon: :'layers', color: :cyan },
        { title: "Metrics That Actually Matter", speaker: "Asha Williams", track: "Product", room: "Hall C", time: "10:30", icon: :'bar-chart', color: :orange },
      ].each do |session| %>
        <%= midwest_card(padding: :sm) do %>
          <div class="flex items-start gap-3 mb-3">
            <div class="w-8 h-8 rounded-lg bg-theme-2 flex items-center justify-center flex-shrink-0">
              <%= midwest_icon session[:icon], class: "text-theme-7 text-base" %>
            </div>
            <div class="min-w-0 flex-1">
              <p class="text-sm font-semibold text-theme-11 leading-snug"><%= session[:title] %></p>
              <p class="text-xs text-theme-7 mt-0.5"><%= session[:speaker] %></p>
            </div>
          </div>
          <div class="flex items-center justify-between flex-wrap gap-1.5">
            <div class="flex gap-1">
              <%= midwest_badge(session[:track], size: :sm) %>
              <%= midwest_badge(session[:room], size: :sm, variant: :outline) %>
            </div>
            <%= midwest_button("RSVP", size: :small, variant: :outline) %>
          </div>
        <% end %>
      <% end %>
    <% end %>
  </div>
  <%# Speaker progress %>
  <%= midwest_card do %>
    <h3 class="text-base font-semibold text-theme-11 mb-4">Confirmed Speakers</h3>
    <div class="space-y-3">
      <%= midwest_progress_bar(value: 34, max: 40, label: "Speaker confirmations", show_label: true, show_value: false) %>
      <p class="text-sm text-theme-7">34 of 40 speakers confirmed. Applications close May 19.</p>
    </div>
    <%= render Midwest::AvatarGroupComponent.new(size: :lg, class: 'mt-4') do |g| %>
      <% g.with_avatar(name: "Priya Nair", color: :violet, tooltip: "Priya Nair") %>
      <% g.with_avatar(name: "Leo Park", color: :lime) %>
      <% g.with_avatar(name: "Ines Moreau", color: :cyan) %>
      <% g.with_avatar(name: "Marcus Chen", color: :blue) %>
      <% g.with_avatar(name: "Dev Patel", color: :orange) %>
      <% g.with_avatar(name: "Asha Williams", color: :teal) %>
      <% g.with_avatar(label: "+28", color: :gray) %>
    <% end %>
  <% end %>
<% end %>

Event Agenda

Conference/event page with a step-based agenda header and a card grid of session blocks for the current day.

No params configured.

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Layouts/event_agenda

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."