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
<div class="midwest-layout size-default padding-none type-default" style="--layout-grid-gap: 2rem; --layout-sidebar-width: 350px">
  <div class="wrapper">
    <section class="pt-8">
      <nav class="midwest-breadcrumbs style-inline" aria-label="Breadcrumb">
        <ol class="breadcrumbs-list">
          <li class="breadcrumb-item">
            <a class="midwest-breadcrumb variant-default" href="#">
              <span class="midwest-label ">
                Projects
              </span>
            </a>
          </li>
          <li class="breadcrumb-separator" aria-hidden="true">
            <span class="sep-char" aria-hidden="true">/</span>
          </li>
          <li class="breadcrumb-item">
            <span class="midwest-breadcrumb variant-default current" aria-current="page">
              <span class="midwest-label ">
                Apollo
              </span>
            </span>
          </li>
        </ol>
      </nav>
      <div class="flex items-start justify-between gap-4 mt-3">
        <div data-controller="midwest-prose" class="midwest-prose prose">
          <div class="flex items-center gap-2 mb-1">
            <h2 class="mt-0">Project Apollo</h2>
            <span class="midwest-badge size-default theme-green">
              <span class="value">Active</span>
            </span>
            <span variant="outline" class="midwest-badge size-default theme-primary">
              <span class="value">Q2 2026</span>
            </span>
          </div>
          <p>A next-generation analytics platform for enterprise teams. Tracks usage, surfaces insights, and integrates with your existing toolchain.</p>
          <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 fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="44" d="M358.62 129.28L86.49 402.08 70 442l39.92-16.49 272.8-272.13-24.1-24.1zM413.07 74.84l-11.79 11.78 24.1 24.1 11.79-11.79a16.51 16.51 0 000-23.34l-.75-.75a16.51 16.51 0 00-23.35 0z"></path></svg>
                </div>
              </div>
              Edit project</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-orange">
        <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 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm0 319.91a20 20 0 1120-20 20 20 0 01-20 20zm21.72-201.15l-5.74 122a16 16 0 01-32 0l-5.74-121.94v-.05a21.74 21.74 0 1143.44 0z"></path></svg>
              </div>
            </div>
            <div class="stat-content">
              <div class="stat-value">24</div>
              <div class="stat-label">Open issues</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">+3</span>
                </span>                <span class="trend-label">this week</span>
              </div>
            </div>
          </footer>
        </div>
      </article>
      <article data-controller="midwest-card" class="midwest-card midwest-stat theme-teal">
        <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 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm108.25 138.29l-134.4 160a16 16 0 01-12 5.71h-.27a16 16 0 01-11.89-5.3l-57.6-64a16 16 0 1123.78-21.4l45.29 50.32 122.59-145.91a16 16 0 0124.5 20.58z"></path></svg>
              </div>
            </div>
            <div class="stat-content">
              <div class="stat-value">68%</div>
              <div class="stat-label">Completion</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">+8%</span>
                </span>                <span class="trend-label">vs last sprint</span>
              </div>
            </div>
          </footer>
        </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">Details</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="Person"><title>Person</title>
                      <path d="M332.64 64.58C313.18 43.57 286 32 256 32c-30.16 0-57.43 11.5-76.8 32.38-19.58 21.11-29.12 49.8-26.88 80.78C156.76 206.28 203.27 256 256 256s99.16-49.71 103.67-110.82c2.27-30.7-7.33-59.33-27.03-80.6zM432 480H80a31 31 0 01-24.2-11.13c-6.5-7.77-9.12-18.38-7.18-29.11C57.06 392.94 83.4 353.61 124.8 326c36.78-24.51 83.37-38 131.2-38s94.42 13.5 131.2 38c41.4 27.6 67.74 66.93 76.18 113.75 1.94 10.73-.68 21.34-7.18 29.11A31 31 0 01432 480z"></path></svg>
                  </div>
                </div>
                <span class="text-theme-6 min-w-16">Owner</span>
                <span class="font-medium text-theme-11">Priya Nair</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 class="text-theme-6 min-w-16">Due date</span>
                <span class="font-medium text-theme-11">Jun 30, 2026</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="People"><title>People</title>
                      <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>
                <span class="text-theme-6 min-w-16">Team</span>
                <span class="font-medium text-theme-11">8 members</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="Flag"><title>Flag</title>
                      <path d="M80 480a16 16 0 01-16-16V68.13a24 24 0 0111.9-20.72C88 40.38 112.38 32 160 32c37.21 0 78.83 14.71 115.55 27.68C305.12 70.13 333.05 80 352 80a183.84 183.84 0 0071-14.5 18 18 0 0125 16.58v219.36a20 20 0 01-12 18.31c-8.71 3.81-40.51 16.25-84 16.25-24.14 0-54.38-7.14-86.39-14.71C229.63 312.79 192.43 304 160 304c-36.87 0-55.74 5.58-64 9.11V464a16 16 0 01-16 16z"></path></svg>
                  </div>
                </div>
                <span class="text-theme-6 min-w-16">Priority</span>
                <span class="font-medium text-theme-11">High</span>
              </div>
            </dl>
          </section>
        </div>
      </article>
  </aside>
    <section 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">Milestones</h3>
            <div class="space-y-3">
              <div class="midwest-progress-bar size-default variant-default theme-green">
                <div class="progress-bar-header">
                  <span class="progress-bar-label">Alpha release</span>
                  <span class="progress-bar-value">100%</span>
                </div>
                <div class="progress-track" role="progressbar" aria-label="Alpha release" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100">
                  <div class="progress-fill" style="width: 100.0%"></div>
                </div>
              </div>
              <div class="midwest-progress-bar size-default variant-default theme-primary">
                <div class="progress-bar-header">
                  <span class="progress-bar-label">Beta launch</span>
                  <span class="progress-bar-value">75%</span>
                </div>
                <div class="progress-track" role="progressbar" aria-label="Beta launch" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75">
                  <div class="progress-fill" style="width: 75.0%"></div>
                </div>
              </div>
              <div class="midwest-progress-bar size-default variant-default theme-orange">
                <div class="progress-bar-header">
                  <span class="progress-bar-label">GA release</span>
                  <span class="progress-bar-value">30%</span>
                </div>
                <div class="progress-track" role="progressbar" aria-label="GA release" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30">
                  <div class="progress-fill" style="width: 30.0%"></div>
                </div>
              </div>
            </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">Recent Activity</h3>
            <div class="space-y-3">
              <div class="flex items-start gap-3">
                <div class="midwest-icon text-lg mt-0.5 flex-shrink-0 text-green-7">
                  <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 circle"><title>Checkmark circle</title>
                      <path d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm108.25 138.29l-134.4 160a16 16 0 01-12 5.71h-.27a16 16 0 01-11.89-5.3l-57.6-64a16 16 0 1123.78-21.4l45.29 50.32 122.59-145.91a16 16 0 0124.5 20.58z"></path></svg>
                  </div>
                </div>
                <div class="min-w-0 flex-1">
                  <p class="text-sm text-theme-9 leading-snug">Leo Park closed issue #142 — Button focus ring regression</p>
                  <p class="text-xs text-theme-6 mt-0.5">12 min ago</p>
                </div>
              </div>
              <div class="flex items-start gap-3">
                <div class="midwest-icon text-lg mt-0.5 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="Git network"><title>Git network</title>
                      <path d="M448 96a64 64 0 10-96.31 55.21c-1.79 20.87-11.47 38.1-28.87 51.29C305.07 216 280.09 224 256 224s-49.07-8-66.82-21.5c-17.4-13.19-27.08-30.42-28.87-51.29a64 64 0 10-64.11.29c2.08 40.87 21.17 76.87 54.31 102C171.3 269.26 197 280.19 224 285.09v75.52a64 64 0 1064 0v-75.52c27-4.9 52.7-15.83 73.49-31.59 33.14-25.13 52.23-61.13 54.31-102A64 64 0 00448 96zM128 64a32 32 0 11-32 32 32 32 0 0132-32zm128 384a32 32 0 1132-32 32 32 0 01-32 32zm128-320a32 32 0 1132-32 32 32 0 01-32 32z"></path></svg>
                  </div>
                </div>
                <div class="min-w-0 flex-1">
                  <p class="text-sm text-theme-9 leading-snug">Ines Moreau merged PR #88 — Analytics v2 schema</p>
                  <p class="text-xs text-theme-6 mt-0.5">1 hr ago</p>
                </div>
              </div>
              <div class="flex items-start gap-3">
                <div class="midwest-icon text-lg mt-0.5 flex-shrink-0 text-red-7">
                  <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="Alert circle"><title>Alert circle</title>
                      <path d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm0 319.91a20 20 0 1120-20 20 20 0 01-20 20zm21.72-201.15l-5.74 122a16 16 0 01-32 0l-5.74-121.94v-.05a21.74 21.74 0 1143.44 0z"></path></svg>
                  </div>
                </div>
                <div class="min-w-0 flex-1">
                  <p class="text-sm text-theme-9 leading-snug">Dev Patel opened issue #143 — API timeout under load</p>
                  <p class="text-xs text-theme-6 mt-0.5">3 hr ago</p>
                </div>
              </div>
              <div class="flex items-start gap-3">
                <div class="midwest-icon text-lg mt-0.5 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="Chatbubble ellipses"><title>Chatbubble ellipses</title>
                      <path d="M398 81.84A227.4 227.4 0 00255.82 32C194.9 32 138 55.47 95.46 98.09 54.35 139.33 31.82 193.78 32 251.37a215.66 215.66 0 0035.65 118.76l.19.27c.28.41.57.82.86 1.22s.65.92.73 1.05l.22.4c1.13 2 2 4.44 1.23 6.9l-18.42 66.66a29.13 29.13 0 00-1.2 7.63A25.69 25.69 0 0076.83 480a29.44 29.44 0 0010.45-2.29l67.49-24.36.85-.33a14.75 14.75 0 015.8-1.15 15.12 15.12 0 015.37 1c1.62.63 16.33 6.26 31.85 10.6 12.9 3.6 39.74 9 60.77 9 59.65 0 115.35-23.1 156.83-65.06C457.36 365.77 480 310.42 480 251.49a213.5 213.5 0 00-4.78-45c-10.34-48.62-37.76-92.9-77.22-124.65zM87.48 380zM160 288a32 32 0 1132-32 32 32 0 01-32 32zm96 0a32 32 0 1132-32 32 32 0 01-32 32zm96 0a32 32 0 1132-32 32 32 0 01-32 32z"></path></svg>
                  </div>
                </div>
                <div class="min-w-0 flex-1">
                  <p class="text-sm text-theme-9 leading-snug">Priya Nair commented on issue #140</p>
                  <p class="text-xs text-theme-6 mt-0.5">Yesterday</p>
                </div>
              </div>
            </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
<%= midwest_layout(padding: :none, html_options: { class: "bg-white dark:bg-gray-12" }) do |l| %>
  <section class="pt-8">
    <%= midwest_breadcrumbs({ title: "Projects", path: "#" }, { title: "Apollo", path: "#" }) %>
    <div class="flex items-start justify-between gap-4 mt-3">
      <%= midwest_prose do %>
        <div class="flex items-center gap-2 mb-1">
          <h2 class="mt-0">Project Apollo</h2>
          <%= midwest_badge("Active", state: :success) %>
          <%= midwest_badge("Q2 2026", variant: :outline) %>
        </div>
        <p>A next-generation analytics platform for enterprise teams. Tracks usage, surfaces insights, and integrates with your existing toolchain.</p>
        <%= midwest_button("Edit project", icon: :pencil, size: :small, variant: :outline) %>
      <% end %>
    </div>
  </section>
  <% l.nav do %>
    <%= midwest_tabs do |tabs| %>
      <% tabs.with_tab("Overview", active: true) do %><% end %>
      <% tabs.with_tab("Activity") do %><% end %>
      <% tabs.with_tab("Team") do %><% end %>
      <% tabs.with_tab("Settings") 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: "24", label: "Open issues", icon: :'alert-circle', color: :orange, trend: "+3", trend_label: "this week") %>
    <%= render Midwest::StatComponent.new(value: "68%", label: "Completion", icon: :'checkmark-circle', color: :teal, trend: "+8%", trend_label: "vs last sprint") %>
    <%= midwest_card(padding: :sm) do %>
      <p class="text-xs font-semibold text-theme-7 uppercase tracking-wide mb-3">Details</p>
      <dl class="space-y-2 text-sm">
        <% [
          { icon: :person, label: "Owner", value: "Priya Nair" },
          { icon: :calendar, label: "Due date", value: "Jun 30, 2026" },
          { icon: :people, label: "Team", value: "8 members" },
          { icon: :flag, label: "Priority", value: "High" },
        ].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 class="text-theme-6 min-w-16"><%= item[:label] %></span>
            <span class="font-medium text-theme-11"><%= item[:value] %></span>
          </div>
        <% end %>
      </dl>
    <% end %>
  </aside>
  <section class="space-y-4">
    <%= midwest_card do %>
      <h3 class="text-sm font-semibold text-theme-11 mb-3">Milestones</h3>
      <div class="space-y-3">
        <% [
          { name: "Alpha release", value: 100, state: :success },
          { name: "Beta launch", value: 75, state: :default },
          { name: "GA release", value: 30, state: :warning },
        ].each do |ms| %>
          <%= midwest_progress_bar(value: ms[:value], label: ms[:name], show_label: true, show_value: true, state: ms[:state]) %>
        <% end %>
      </div>
    <% end %>
    <%= midwest_card do %>
      <h3 class="text-sm font-semibold text-theme-11 mb-3">Recent Activity</h3>
      <div class="space-y-3">
        <% [
          { icon: :'checkmark-circle', text: "Leo Park closed issue #142 — Button focus ring regression", time: "12 min ago", state: :success },
          { icon: :'git-network', text: "Ines Moreau merged PR #88 — Analytics v2 schema", time: "1 hr ago", state: :default },
          { icon: :'alert-circle', text: "Dev Patel opened issue #143 — API timeout under load", time: "3 hr ago", state: :error },
          { icon: :'chatbubble-ellipses', text: "Priya Nair commented on issue #140", time: "Yesterday", state: :default },
        ].each do |ev| %>
          <div class="flex items-start gap-3">
            <%= midwest_icon ev[:icon], class: "text-lg mt-0.5 flex-shrink-0 #{ev[:state] == :success ? 'text-green-7' : ev[:state] == :error ? 'text-red-7' : 'text-theme-6'}" %>
            <div class="min-w-0 flex-1">
              <p class="text-sm text-theme-9 leading-snug"><%= ev[:text] %></p>
              <p class="text-xs text-theme-6 mt-0.5"><%= ev[:time] %></p>
            </div>
          </div>
        <% end %>
      </div>
    <% end %>
  </section>
<% end %>

Page Overview

This is the minimum code needed to make a tag.

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

Annotate a preview to embed its Figma design here:

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