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
<div class="midwest-layout size-default padding-none type-default" style="--layout-grid-gap: 2rem; --layout-sidebar-width: 350px"> <div class="wrapper"> <section class="flex gap-6 items-start pt-8"> <span class="midwest-avatar size-4xl theme-blue shape-squircle" title="You tabbed on an Avatar for Marcus Chen"> <div class="letter" title="Marcus Chen"> MC </div> </span> <div data-controller="midwest-prose" class="midwest-prose prose"> <div class="flex items-center gap-2 mb-1"> <span class="midwest-badge size-default theme-cyan"> <span class="value">Senior Designer</span> </span> <span variant="outline" class="midwest-badge size-default theme-primary"> <span class="value">Design</span> </span> </div> <h2 class="mt-1">Marcus Chen</h2> <p>Senior designer focused on product systems, motion design, and making complex UI feel obvious. Based in Chicago.</p> <div class="flex gap-2 mt-3"> <a class="midwest-button variant-default size-small theme-primary" name="button" href="/"> <span class="midwest-button-content"> <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" aria-hidden="true"><path d="M288 256c52.79 0 99.43-49.71 104-110.82 2.27-30.7-7.36-59.33-27.12-80.6C345.33 43.57 318 32 288 32c-30.24 0-57.59 11.5-77 32.38-19.63 21.11-29.2 49.8-27 80.78C188.49 206.28 235.12 256 288 256zM495.38 439.76c-8.44-46.82-34.79-86.15-76.19-113.75C382.42 301.5 335.83 288 288 288s-94.42 13.5-131.19 38c-41.4 27.6-67.75 66.93-76.19 113.75-1.93 10.73.69 21.34 7.19 29.11A30.94 30.94 0 00112 480h352a30.94 30.94 0 0024.21-11.13c6.48-7.77 9.1-18.38 7.17-29.11zM104 288v-40h40a16 16 0 000-32h-40v-40a16 16 0 00-32 0v40H32a16 16 0 000 32h40v40a16 16 0 0032 0z"></path></svg> </div> </div> Follow</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"> <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" aria-hidden="true"><path d="M76.83 480a25.69 25.69 0 01-25.57-25.74 29.13 29.13 0 011.2-7.63L70.88 380c.77-2.46-.1-4.94-1.23-6.9l-.22-.4c-.08-.13-.46-.66-.73-1.05s-.58-.81-.86-1.22l-.19-.27A215.66 215.66 0 0132 251.37c-.18-57.59 22.35-112 63.46-153.28C138 55.47 194.9 32 255.82 32A227.4 227.4 0 01398 81.84c39.45 31.75 66.87 76 77.21 124.68a213.5 213.5 0 014.78 45c0 58.93-22.64 114.28-63.76 155.87-41.48 42-97.18 65.06-156.83 65.06-21 0-47.87-5.36-60.77-9-15.52-4.34-30.23-10-31.85-10.6a15.12 15.12 0 00-5.37-1 14.75 14.75 0 00-5.8 1.15l-.85.33-67.48 24.38A29.44 29.44 0 0176.83 480zm-2-31.8zM87.48 380z"></path></svg> </div> </div> Message</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> </section> </div></div><div class="midwest-layout size-default padding-default type-sidebar" style="--layout-grid-gap: 3rem; --layout-sidebar-width: 260px"> <div class="wrapper"> <aside class="space-y-3"> <article data-controller="midwest-card" class="midwest-card midwest-stat theme-blue"> <div class="wrap"> <section> <div class="midwest-icon stat-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" aria-hidden="true"><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 class="stat-content"> <div class="stat-value">34</div> <div class="stat-label">Projects shipped</div> </div> </section> <footer> <div class="stat-meta"> <div class="stat-trend trend-up"> <span class="midwest-badge has-icon size-sm theme-green trend-value"> <div class="midwest-icon "> <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="Arrow up circle"><title>Arrow up circle</title> <path d="M256 48C141.13 48 48 141.13 48 256s93.13 208 208 208 208-93.13 208-208S370.87 48 256 48zm91.36 212.65a16 16 0 01-22.63.09L272 208.42V342a16 16 0 01-32 0V208.42l-52.73 52.32A16 16 0 11164.73 238l80-79.39a16 16 0 0122.54 0l80 79.39a16 16 0 01.09 22.65z"></path></svg> </div> </div> <span class="value">+4</span> </span> <span class="trend-label">this year</span> </div> </div> </footer> </div> </article> <article data-controller="midwest-card" class="midwest-card midwest-stat theme-violet"> <div class="wrap"> <section> <div class="midwest-icon stat-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" aria-hidden="true"><path d="M336 256c-20.56 0-40.44-9.18-56-25.84-15.13-16.25-24.37-37.92-26-61-1.74-24.62 5.77-47.26 21.14-63.76S312 80 336 80c23.83 0 45.38 9.06 60.7 25.52 15.47 16.62 23 39.22 21.26 63.63-1.67 23.11-10.9 44.77-26 61C376.44 246.82 356.57 256 336 256zm66-88zM467.83 432H204.18a27.71 27.71 0 01-22-10.67 30.22 30.22 0 01-5.26-25.79c8.42-33.81 29.28-61.85 60.32-81.08C264.79 297.4 299.86 288 336 288c36.85 0 71 9 98.71 26.05 31.11 19.13 52 47.33 60.38 81.55a30.27 30.27 0 01-5.32 25.78A27.68 27.68 0 01467.83 432zM147 260c-35.19 0-66.13-32.72-69-72.93-1.42-20.6 5-39.65 18-53.62 12.86-13.83 31-21.45 51-21.45s38 7.66 50.93 21.57c13.1 14.08 19.5 33.09 18 53.52-2.87 40.2-33.8 72.91-68.93 72.91zM212.66 291.45c-17.59-8.6-40.42-12.9-65.65-12.9-29.46 0-58.07 7.68-80.57 21.62-25.51 15.83-42.67 38.88-49.6 66.71a27.39 27.39 0 004.79 23.36A25.32 25.32 0 0041.72 400h111a8 8 0 007.87-6.57c.11-.63.25-1.26.41-1.88 8.48-34.06 28.35-62.84 57.71-83.82a8 8 0 00-.63-13.39c-1.57-.92-3.37-1.89-5.42-2.89z"></path></svg> </div> </div> <div class="stat-content"> <div class="stat-value">1.2k</div> <div class="stat-label">Followers</div> </div> </section> </div> </article> <article data-controller="midwest-card" class="midwest-card padding-sm"> <div class="wrap"> <section> <p class="text-xs font-semibold text-theme-7 uppercase tracking-wide mb-3">Contact</p> <dl class="space-y-2 text-sm"> <div class="flex items-center gap-2 text-theme-8"> <div class="midwest-icon text-theme-6 flex-shrink-0 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="Business"><title>Business</title> <path d="M432 176H320V64a48 48 0 00-48-48H80a48 48 0 00-48 48v416a16 16 0 0016 16h104a8 8 0 008-8v-71.55c0-8.61 6.62-16 15.23-16.43A16 16 0 01192 416v72a8 8 0 008 8h264a16 16 0 0016-16V224a48 48 0 00-48-48zM98.08 431.87a16 16 0 1113.79-13.79 16 16 0 01-13.79 13.79zm0-80a16 16 0 1113.79-13.79 16 16 0 01-13.79 13.79zm0-80a16 16 0 1113.79-13.79 16 16 0 01-13.79 13.79zm0-80a16 16 0 1113.79-13.79 16 16 0 01-13.79 13.79zm0-80a16 16 0 1113.79-13.79 16 16 0 01-13.79 13.79zm80 240a16 16 0 1113.79-13.79 16 16 0 01-13.79 13.79zm0-80a16 16 0 1113.79-13.79 16 16 0 01-13.79 13.79zm0-80a16 16 0 1113.79-13.79 16 16 0 01-13.79 13.79zm0-80a16 16 0 1113.79-13.79 16 16 0 01-13.79 13.79zm80 320a16 16 0 1113.79-13.79 16 16 0 01-13.79 13.79zm0-80a16 16 0 1113.79-13.79 16 16 0 01-13.79 13.79zm0-80a16 16 0 1113.79-13.79 16 16 0 01-13.79 13.79zm0-80a16 16 0 1113.79-13.79 16 16 0 01-13.79 13.79zm0-80a16 16 0 1113.79-13.79 16 16 0 01-13.79 13.79zM444 464H320V208h112a16 16 0 0116 16v236a4 4 0 01-4 4z"></path><path d="M400 400a16 16 0 1016 16 16 16 0 00-16-16zM400 320a16 16 0 1016 16 16 16 0 00-16-16zM400 240a16 16 0 1016 16 16 16 0 00-16-16zM336 400a16 16 0 1016 16 16 16 0 00-16-16zM336 320a16 16 0 1016 16 16 16 0 00-16-16zM336 240a16 16 0 1016 16 16 16 0 00-16-16z"></path></svg> </div> </div> <span>Unabridged Software</span> </div> <div class="flex items-center gap-2 text-theme-8"> <div class="midwest-icon text-theme-6 flex-shrink-0 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="Location"><title>Location</title> <circle cx="256" cy="192" r="32"></circle><path d="M256 32c-88.22 0-160 68.65-160 153 0 40.17 18.31 93.59 54.42 158.78 29 52.34 62.55 99.67 80 123.22a31.75 31.75 0 0051.22 0c17.42-23.55 51-70.88 80-123.22C397.69 278.61 416 225.19 416 185c0-84.35-71.78-153-160-153zm0 224a64 64 0 1164-64 64.07 64.07 0 01-64 64z"></path></svg> </div> </div> <span>Chicago, IL</span> </div> <div class="flex items-center gap-2 text-theme-8"> <div class="midwest-icon text-theme-6 flex-shrink-0 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="Mail"><title>Mail</title> <path d="M424 80H88a56.06 56.06 0 00-56 56v240a56.06 56.06 0 0056 56h336a56.06 56.06 0 0056-56V136a56.06 56.06 0 00-56-56zm-14.18 92.63l-144 112a16 16 0 01-19.64 0l-144-112a16 16 0 1119.64-25.26L256 251.73l134.18-104.36a16 16 0 0119.64 25.26z"></path></svg> </div> </div> <span>marcus@unabridged.io</span> </div> <div class="flex items-center gap-2 text-theme-8"> <div class="midwest-icon text-theme-6 flex-shrink-0 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="Calendar"><title>Calendar</title> <path d="M480 128a64 64 0 00-64-64h-16V48.45c0-8.61-6.62-16-15.23-16.43A16 16 0 00368 48v16H144V48.45c0-8.61-6.62-16-15.23-16.43A16 16 0 00112 48v16H96a64 64 0 00-64 64v12a4 4 0 004 4h440a4 4 0 004-4zM32 416a64 64 0 0064 64h320a64 64 0 0064-64V179a3 3 0 00-3-3H35a3 3 0 00-3 3zm344-208a24 24 0 11-24 24 24 24 0 0124-24zm0 80a24 24 0 11-24 24 24 24 0 0124-24zm-80-80a24 24 0 11-24 24 24 24 0 0124-24zm0 80a24 24 0 11-24 24 24 24 0 0124-24zm0 80a24 24 0 11-24 24 24 24 0 0124-24zm-80-80a24 24 0 11-24 24 24 24 0 0124-24zm0 80a24 24 0 11-24 24 24 24 0 0124-24zm-80-80a24 24 0 11-24 24 24 24 0 0124-24zm0 80a24 24 0 11-24 24 24 24 0 0124-24z"></path></svg> </div> </div> <span>Joined Jan 2022</span> </div> </dl> </section> </div> </article> <article data-controller="midwest-card" class="midwest-card padding-sm"> <div class="wrap"> <section> <p class="text-xs font-semibold text-theme-7 uppercase tracking-wide mb-2">Skills</p> <div class="flex flex-wrap gap-1.5"> <span class="midwest-badge size-sm theme-primary"> <span class="value">Figma</span> </span> <span class="midwest-badge size-sm theme-primary"> <span class="value">Motion Design</span> </span> <span class="midwest-badge size-sm theme-primary"> <span class="value">Tailwind</span> </span> <span class="midwest-badge size-sm theme-primary"> <span class="value">CSS</span> </span> <span class="midwest-badge size-sm theme-primary"> <span class="value">Accessibility</span> </span> <span class="midwest-badge size-sm theme-primary"> <span class="value">Design Systems</span> </span> </div> </section> </div> </article> </aside> <section class="space-y-4"> <article data-controller="midwest-card" class="midwest-card"> <div class="wrap"> <section> <div class="flex items-center justify-between mb-3"> <h3 class="text-sm font-semibold text-theme-11">Recent Work</h3> <a class="midwest-button variant-ghost size-small theme-primary" name="button" href="/"> <span class="midwest-button-content">View all</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 class="midwest-grid" style="--grid-width: 240px; --grid-gap: 1rem"> <article data-controller="midwest-card" class="midwest-card padding-sm"> <div class="wrap"> <section> <div class="flex items-start gap-3"> <div class="midwest-icon text-xl text-theme-6 mt-0.5 flex-shrink-0"> <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> <p class="text-sm font-semibold text-theme-11 leading-snug">Motion design in production</p> <span class="midwest-badge size-sm theme-primary mt-1"> <span class="value">Design</span> </span> </div> </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"> <div class="midwest-icon text-xl text-theme-6 mt-0.5 flex-shrink-0"> <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> <p class="text-sm font-semibold text-theme-11 leading-snug">Midwest carousel redesign</p> <span class="midwest-badge size-sm theme-primary mt-1"> <span class="value">Engineering</span> </span> </div> </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"> <div class="midwest-icon text-xl text-theme-6 mt-0.5 flex-shrink-0"> <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> <p class="text-sm font-semibold text-theme-11 leading-snug">Accessibility audit Q1</p> <span class="midwest-badge size-sm theme-primary mt-1"> <span class="value">Research</span> </span> </div> </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"> <div class="midwest-icon text-xl text-theme-6 mt-0.5 flex-shrink-0"> <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="Sparkles"><title>Sparkles</title> <path d="M208 512a24.84 24.84 0 01-23.34-16l-39.84-103.6a16.06 16.06 0 00-9.19-9.19L32 343.34a25 25 0 010-46.68l103.6-39.84a16.06 16.06 0 009.19-9.19L184.66 144a25 25 0 0146.68 0l39.84 103.6a16.06 16.06 0 009.19 9.19l103 39.63a25.49 25.49 0 0116.63 24.1 24.82 24.82 0 01-16 22.82l-103.6 39.84a16.06 16.06 0 00-9.19 9.19L231.34 496A24.84 24.84 0 01208 512zm66.85-254.84zM88 176a14.67 14.67 0 01-13.69-9.4l-16.86-43.84a7.28 7.28 0 00-4.21-4.21L9.4 101.69a14.67 14.67 0 010-27.38l43.84-16.86a7.31 7.31 0 004.21-4.21L74.16 9.79A15 15 0 0186.23.11a14.67 14.67 0 0115.46 9.29l16.86 43.84a7.31 7.31 0 004.21 4.21l43.84 16.86a14.67 14.67 0 010 27.38l-43.84 16.86a7.28 7.28 0 00-4.21 4.21l-16.86 43.84A14.67 14.67 0 0188 176zM400 256a16 16 0 01-14.93-10.26l-22.84-59.37a8 8 0 00-4.6-4.6l-59.37-22.84a16 16 0 010-29.86l59.37-22.84a8 8 0 004.6-4.6l22.67-58.95a16.45 16.45 0 0113.17-10.57 16 16 0 0116.86 10.15l22.84 59.37a8 8 0 004.6 4.6l59.37 22.84a16 16 0 010 29.86l-59.37 22.84a8 8 0 00-4.6 4.6l-22.84 59.37A16 16 0 01400 256z"></path></svg> </div> </div> <div> <p class="text-sm font-semibold text-theme-11 leading-snug">Brand refresh 2026</p> <span class="midwest-badge size-sm theme-primary mt-1"> <span class="value">Design</span> </span> </div> </div> </section> </div> </article> </div> </section> </div> </article> <article data-controller="midwest-card" class="midwest-card"> <div class="wrap"> <section> <h3 class="text-sm font-semibold text-theme-11 mb-3">Collaborators</h3> <div role="group" aria-label="5 avatars" class="midwest-group size-md gap-overlap midwest-avatar-group"> <span tooltip="Priya Nair" class="midwest-avatar size-md theme-violet shape-square" title="You tabbed on an Avatar for Priya Nair"> <div class="letter" title="Priya Nair"> PN </div> </span> <span tooltip="Leo Park" class="midwest-avatar size-md theme-lime shape-square" title="You tabbed on an Avatar for Leo Park"> <div class="letter" title="Leo Park"> LP </div> </span> <span tooltip="Ines Moreau" class="midwest-avatar size-md theme-cyan shape-square" title="You tabbed on an Avatar for Ines Moreau"> <div class="letter" title="Ines Moreau"> IM </div> </span> <span tooltip="Dev Patel" class="midwest-avatar size-md 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-md theme-gray shape-square" title="+6"> <div class="letter" title="Midwest Design"> +6 </div> </span> </div> </section> </div> </article> </section> </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
<%= midwest_layout(padding: :none, html_options: { class: "bg-white dark:bg-gray-12" }) do |l| %> <section class="flex gap-6 items-start pt-8"> <%= midwest_avatar(name: "Marcus Chen", size: :"4xl", color: :blue, shape: :squircle) %> <%= midwest_prose do %> <div class="flex items-center gap-2 mb-1"> <%= midwest_badge("Senior Designer", state: :info) %> <%= midwest_badge("Design", variant: :outline) %> </div> <h2 class="mt-1">Marcus Chen</h2> <p>Senior designer focused on product systems, motion design, and making complex UI feel obvious. Based in Chicago.</p> <div class="flex gap-2 mt-3"> <%= midwest_button("Follow", icon: :'person-add', size: :small) %> <%= midwest_button("Message", icon: :'chatbubble', size: :small, variant: :outline) %> </div> <% end %> </section> <% l.nav do %> <%= midwest_tabs do |tabs| %> <% tabs.with_tab("Profile", active: true) do %><% end %> <% tabs.with_tab("Work") do %><% end %> <% tabs.with_tab("Activity") do %><% end %> <% end %> <% end %><% end %><%= midwest_layout(type: :sidebar, sidebar_width: 260, gap: 3) do %> <aside class="space-y-3"> <%= render Midwest::StatComponent.new(value: "34", label: "Projects shipped", icon: :layers, color: :blue, trend: "+4", trend_label: "this year") %> <%= render Midwest::StatComponent.new(value: "1.2k", label: "Followers", icon: :people, color: :violet) %> <%= midwest_card(padding: :sm) do %> <p class="text-xs font-semibold text-theme-7 uppercase tracking-wide mb-3">Contact</p> <dl class="space-y-2 text-sm"> <% [ { icon: :business, text: "Unabridged Software" }, { icon: :location, text: "Chicago, IL" }, { icon: :mail, text: "marcus@unabridged.io" }, { icon: :calendar, text: "Joined Jan 2022" }, ].each do |item| %> <div class="flex items-center gap-2 text-theme-8"> <%= midwest_icon item[:icon], class: "text-theme-6 flex-shrink-0 text-base" %> <span><%= item[:text] %></span> </div> <% end %> </dl> <% end %> <%= midwest_card(padding: :sm) do %> <p class="text-xs font-semibold text-theme-7 uppercase tracking-wide mb-2">Skills</p> <div class="flex flex-wrap gap-1.5"> <% %w[Figma Motion\ Design Tailwind CSS Accessibility Design\ Systems].each do |skill| %> <%= midwest_badge(skill, size: :sm) %> <% end %> </div> <% end %> </aside> <section class="space-y-4"> <%= midwest_card do %> <div class="flex items-center justify-between mb-3"> <h3 class="text-sm font-semibold text-theme-11">Recent Work</h3> <%= midwest_button("View all", variant: :ghost, size: :small) %> </div> <%= midwest_grid(width: 240, gap: 1) do %> <% [ { title: "Motion design in production", tag: "Design", icon: :'color-palette', color: :pink }, { title: "Midwest carousel redesign", tag: "Engineering", icon: :code, color: :blue }, { title: "Accessibility audit Q1", tag: "Research", icon: :list, color: :teal }, { title: "Brand refresh 2026", tag: "Design", icon: :sparkles, color: :violet }, ].each do |item| %> <%= midwest_card(padding: :sm) do %> <div class="flex items-start gap-3"> <%= midwest_icon item[:icon], class: "text-xl text-theme-6 mt-0.5 flex-shrink-0" %> <div> <p class="text-sm font-semibold text-theme-11 leading-snug"><%= item[:title] %></p> <%= midwest_badge(item[:tag], size: :sm, class: "mt-1") %> </div> </div> <% end %> <% end %> <% end %> <% end %> <%= midwest_card do %> <h3 class="text-sm font-semibold text-theme-11 mb-3">Collaborators</h3> <%= render Midwest::AvatarGroupComponent.new(size: :md) do |g| %> <% g.with_avatar(name: "Priya Nair", color: :violet, tooltip: "Priya Nair") %> <% g.with_avatar(name: "Leo Park", color: :lime, tooltip: "Leo Park") %> <% g.with_avatar(name: "Ines Moreau", color: :cyan, tooltip: "Ines Moreau") %> <% g.with_avatar(name: "Dev Patel", color: :orange, tooltip: "Dev Patel") %> <% g.with_avatar(label: "+6", color: :gray) %> <% end %> <% end %> </section><% end %>No notes provided.
No params configured.
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Layouts/page_overview_with_avatar
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."