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
<div class="midwest-layout size-full padding-none type-default" style="--layout-grid-gap: 0rem; --layout-sidebar-width: 350px">
  <div class="wrapper">
    <section class="bg-theme-9 text-white">
      <div class="max-w-5xl mx-auto px-6 py-10 flex flex-col sm:flex-row items-start sm:items-end gap-6">
        <span class="midwest-avatar size-4xl theme-violet shape-squircle" title="You tabbed on an Avatar for Priya Nair">
          <div class="letter" title="Priya Nair">
            PN
          </div>
        </span>
        <div class="flex-1 min-w-0">
          <div class="flex flex-wrap items-center gap-2 mb-1">
            <h1 class="text-2xl font-bold text-white">Priya Nair</h1>
            <span class="midwest-badge size-default theme-green">
              <span class="value">Pro</span>
            </span>
            <span variant="outline" class="midwest-badge size-default theme-primary border-theme-3 text-theme-2">
              <span class="value">Staff</span>
            </span>
          </div>
          <p class="text-theme-2 text-sm mb-3">Staff Engineer · Unabridged Software · Chicago, IL</p>
          <div class="flex flex-wrap gap-2">
            <a class="midwest-button variant-outline size-small theme-primary border-white text-white hover:bg-theme-8" 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-default size-small theme-primary bg-white text-theme-9 hover:bg-theme-1" 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>
        <div class="flex gap-4">
          <article data-controller="midwest-card" class="midwest-card midwest-stat theme-violet">
            <div class="wrap">
              <section>
                <div class="stat-content">
                  <div class="stat-value">142</div>
                  <div class="stat-label">Posts</div>
                </div>
              </section>
            </div>
          </article>
          <article data-controller="midwest-card" class="midwest-card midwest-stat theme-violet">
            <div class="wrap">
              <section>
                <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 midwest-stat theme-violet">
            <div class="wrap">
              <section>
                <div class="stat-content">
                  <div class="stat-value">38</div>
                  <div class="stat-label">Projects</div>
                </div>
              </section>
            </div>
          </article>
        </div>
      </div>
    </section>
  </div>
</div>
<div class="midwest-layout size-lg padding-default type-sidebar-flipped" style="--layout-grid-gap: 2rem; --layout-sidebar-width: 300px">
  <div class="wrapper">
    <aside class="space-y-4">
      <article data-controller="midwest-card" class="midwest-card">
        <div class="wrap">
          <section>
            <h3 class="text-sm font-semibold text-theme-11 mb-3">About</h3>
            <div data-controller="midwest-prose" class="midwest-prose prose">
              <p>Staff engineer focused on design systems, developer tooling, and making impossible UI feel inevitable.</p>
            </div>
      
            <dl class="mt-3 space-y-2 text-sm">
              <div class="flex items-center gap-2 text-theme-8">
                <div class="midwest-icon text-base flex-shrink-0 text-theme-6">
                  <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-base flex-shrink-0 text-theme-6">
                  <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-base flex-shrink-0 text-theme-6">
                  <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="Link"><title>Link</title>
                      <path d="M200.66 352H144a96 96 0 010-192h55.41M312.59 160H368a96 96 0 010 192h-56.66M169.07 256h175.86" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"></path></svg>
                  </div>
                </div>
                <span>priya.dev</span>
              </div>
              <div class="flex items-center gap-2 text-theme-8">
                <div class="midwest-icon text-base flex-shrink-0 text-theme-6">
                  <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 March 2019</span>
              </div>
            </dl>
          </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">Skills</h3>
            <div class="flex flex-wrap gap-1.5">
              <span class="midwest-badge size-sm theme-primary">
                <span class="value">Ruby</span>
              </span>
              <span class="midwest-badge size-sm theme-primary">
                <span class="value">Rails</span>
              </span>
              <span class="midwest-badge size-sm theme-primary">
                <span class="value">React</span>
              </span>
              <span class="midwest-badge size-sm theme-primary">
                <span class="value">TypeScript</span>
              </span>
              <span class="midwest-badge size-sm theme-primary">
                <span class="value">Design Systems</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>
            </div>
          </section>
        </div>
      </article>
  </aside>
    <section class="space-y-4">
      <div class="flex items-center justify-between">
        <h2 class="text-lg font-semibold text-theme-11">Recent Posts</h2>
        <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 fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M256 112v288M400 256H112"></path></svg>
              </div>
            </div>
            New post</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: 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">
                <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 class="min-w-0">
                  <p class="text-sm font-semibold text-theme-11 leading-snug">Why I stopped fighting CSS</p>
                  <div class="flex items-center gap-2 mt-1">
                    <span class="text-xs text-theme-7">May 10</span>
                    <span class="text-xs text-theme-5">·</span>
                    <span class="text-xs text-theme-7">2.4k reads</span>
                  </div>
                </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 class="min-w-0">
                  <p class="text-sm font-semibold text-theme-11 leading-snug">ViewComponent patterns that scale</p>
                  <div class="flex items-center gap-2 mt-1">
                    <span class="text-xs text-theme-7">Apr 28</span>
                    <span class="text-xs text-theme-5">·</span>
                    <span class="text-xs text-theme-7">1.1k reads</span>
                  </div>
                </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="Bulb"><title>Bulb</title>
                      <path d="M288 464h-64a16 16 0 000 32h64a16 16 0 000-32zM304 416h-96a16 16 0 000 32h96a16 16 0 000-32zM369.42 62.69C339.35 32.58 299.07 16 256 16A159.62 159.62 0 0096 176c0 46.62 17.87 90.23 49 119.64l4.36 4.09C167.37 316.57 192 339.64 192 360v24a16 16 0 0016 16h24a8 8 0 008-8V274.82a8 8 0 00-5.13-7.47A130.73 130.73 0 01208.71 253a16 16 0 1118.58-26c7.4 5.24 21.65 13 28.71 13s21.31-7.78 28.73-13a16 16 0 0118.56 26 130.73 130.73 0 01-26.16 14.32 8 8 0 00-5.13 7.47V392a8 8 0 008 8h24a16 16 0 0016-16v-24c0-19.88 24.36-42.93 42.15-59.77l4.91-4.66C399.08 265 416 223.61 416 176a159.16 159.16 0 00-46.58-113.31z"></path></svg>
                  </div>
                </div>
                <div class="min-w-0">
                  <p class="text-sm font-semibold text-theme-11 leading-snug">The hidden cost of premature abstraction</p>
                  <div class="flex items-center gap-2 mt-1">
                    <span class="text-xs text-theme-7">Apr 12</span>
                    <span class="text-xs text-theme-5">·</span>
                    <span class="text-xs text-theme-7">3.2k reads</span>
                  </div>
                </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 class="min-w-0">
                  <p class="text-sm font-semibold text-theme-11 leading-snug">Audit-driven design systems</p>
                  <div class="flex items-center gap-2 mt-1">
                    <span class="text-xs text-theme-7">Mar 30</span>
                    <span class="text-xs text-theme-5">·</span>
                    <span class="text-xs text-theme-7">890 reads</span>
                  </div>
                </div>
              </div>
            </section>
          </div>
        </article>
      </div>
  </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
95
96
97
98
99
100
101
<%= midwest_layout(padding: :none, size: :full, gap: 0) do |l| %>
  <%# ---- Profile hero ---- %>
  <section class="bg-theme-9 text-white">
    <div class="max-w-5xl mx-auto px-6 py-10 flex flex-col sm:flex-row items-start sm:items-end gap-6">
      <%= midwest_avatar(name: "Priya Nair", size: :"4xl", color: :violet, shape: :squircle) %>
      <div class="flex-1 min-w-0">
        <div class="flex flex-wrap items-center gap-2 mb-1">
          <h1 class="text-2xl font-bold text-white">Priya Nair</h1>
          <%= midwest_badge("Pro", state: :success) %>
          <%= midwest_badge("Staff", variant: :outline, class: "border-theme-3 text-theme-2") %>
        </div>
        <p class="text-theme-2 text-sm mb-3">Staff Engineer · Unabridged Software · Chicago, IL</p>
        <div class="flex flex-wrap gap-2">
          <%= midwest_button("Follow", icon: :'person-add', size: :small, variant: :outline, class: "border-white text-white hover:bg-theme-8") %>
          <%= midwest_button("Message", icon: :'chatbubble', size: :small, class: "bg-white text-theme-9 hover:bg-theme-1") %>
        </div>
      </div>
      <div class="flex gap-4">
        <%= render Midwest::StatComponent.new(value: "142", label: "Posts", color: :violet) %>
        <%= render Midwest::StatComponent.new(value: "1.2k", label: "Followers", color: :violet) %>
        <%= render Midwest::StatComponent.new(value: "38", label: "Projects", color: :violet) %>
      </div>
    </div>
  </section>
  <%# ---- Tab nav ---- %>
  <% l.nav do %>
    <div class="max-w-5xl mx-auto px-6">
      <%= midwest_tabs do |tabs| %>
        <% tabs.with_tab("Overview", active: true) do %><% end %>
        <% tabs.with_tab("Posts") do %><% end %>
        <% tabs.with_tab("Projects") do %><% end %>
        <% tabs.with_tab("Activity") do %><% end %>
      <% end %>
    </div>
  <% end %>
<% end %>
<%= midwest_layout(type: :sidebar, size: :lg, sidebar_width: 300, gap: 2, flipped: true) do %>
  <%# Right sidebar %>
  <aside class="space-y-4">
    <%= midwest_card do %>
      <h3 class="text-sm font-semibold text-theme-11 mb-3">About</h3>
      <%= midwest_prose do %>
        <p>Staff engineer focused on design systems, developer tooling, and making impossible UI feel inevitable.</p>
      <% end %>
      <dl class="mt-3 space-y-2 text-sm">
        <% [
          { icon: :business, text: "Unabridged Software" },
          { icon: :location, text: "Chicago, IL" },
          { icon: :link, text: "priya.dev" },
          { icon: :calendar, text: "Joined March 2019" },
        ].each do |item| %>
          <div class="flex items-center gap-2 text-theme-8">
            <%= midwest_icon item[:icon], class: "text-base flex-shrink-0 text-theme-6" %>
            <span><%= item[:text] %></span>
          </div>
        <% end %>
      </dl>
    <% end %>
    <%= midwest_card do %>
      <h3 class="text-sm font-semibold text-theme-11 mb-3">Skills</h3>
      <div class="flex flex-wrap gap-1.5">
        <% %w[Ruby Rails React TypeScript Design\ Systems Tailwind CSS].each do |skill| %>
          <%= midwest_badge(skill, size: :sm) %>
        <% end %>
      </div>
    <% end %>
  </aside>
  <%# Main content %>
  <section class="space-y-4">
    <div class="flex items-center justify-between">
      <h2 class="text-lg font-semibold text-theme-11">Recent Posts</h2>
      <%= midwest_button("New post", icon: :add, size: :small) %>
    </div>
    <%= midwest_grid(width: 280, gap: 1) do %>
      <% [
        { title: "Why I stopped fighting CSS", date: "May 10", icon: :'color-palette', reads: "2.4k" },
        { title: "ViewComponent patterns that scale", date: "Apr 28", icon: :code, reads: "1.1k" },
        { title: "The hidden cost of premature abstraction", date: "Apr 12", icon: :'bulb', reads: "3.2k" },
        { title: "Audit-driven design systems", date: "Mar 30", icon: :list, reads: "890" },
      ].each do |post| %>
        <%= midwest_card(padding: :sm) do %>
          <div class="flex items-start gap-3">
            <%= midwest_icon post[:icon], class: "text-xl text-theme-6 mt-0.5 flex-shrink-0" %>
            <div class="min-w-0">
              <p class="text-sm font-semibold text-theme-11 leading-snug"><%= post[:title] %></p>
              <div class="flex items-center gap-2 mt-1">
                <span class="text-xs text-theme-7"><%= post[:date] %></span>
                <span class="text-xs text-theme-5">·</span>
                <span class="text-xs text-theme-7"><%= post[:reads] %> reads</span>
              </div>
            </div>
          </div>
        <% end %>
      <% end %>
    <% end %>
  </section>
<% end %>

User Profile

Profile hero with avatar, role badges, and a card grid of stats and recent contributions.

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/user_profile

Annotate a preview to embed its Figma design here:

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