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
<div class="flex flex-col gap-6">
  <div>
    <p class="text-sm text-gray-11 px-1 mb-2">Default (stretch) — both columns fill the full row height</p>
    <div class="midwest-layout size-default padding-sm type-half" style="--layout-grid-gap: 2rem; --layout-sidebar-width: 350px">
      <div class="wrapper">
        <section>
          <article data-controller="midwest-card" class="midwest-card h-full">
            <div class="wrap">
              <section>
                <p class="font-semibold">Tall column</p>
                <p class="mt-2 text-sm text-gray-11">This column has more content, setting the row height.</p>
                <p class="mt-2 text-sm text-gray-11">The short column stretches to match by default.</p>
              </section>
            </div>
          </article>
      </section>
        <aside>
          <article data-controller="midwest-card" class="midwest-card h-full">
            <div class="wrap">
              <section>
                <p class="font-semibold">Short column</p>
              </section>
            </div>
          </article>
      </aside>
      </div>
    </div>
  </div>
  <div>
    <p class="text-sm text-gray-11 px-1 mb-2"><code>align: :top</code> — columns align to the top and take their natural height</p>
    <div class="midwest-layout size-default padding-sm type-half" style="--layout-grid-gap: 2rem; --layout-sidebar-width: 350px; --layout-align: start">
      <div class="wrapper">
        <section>
          <article data-controller="midwest-card" class="midwest-card h-full">
            <div class="wrap">
              <section>
                <p class="font-semibold">Tall column</p>
                <p class="mt-2 text-sm text-gray-11">This column has more content, setting the row height.</p>
                <p class="mt-2 text-sm text-gray-11">The short column no longer stretches.</p>
              </section>
            </div>
          </article>
      </section>
        <aside>
          <article data-controller="midwest-card" class="midwest-card h-full">
            <div class="wrap">
              <section>
                <p class="font-semibold">Short column</p>
              </section>
            </div>
          </article>
      </aside>
      </div>
    </div>
  </div>
  <div>
    <p class="text-sm text-gray-11 px-1 mb-2"><code>align: :center</code> — columns are vertically centered within the row</p>
    <div class="midwest-layout size-default padding-sm type-half" style="--layout-grid-gap: 2rem; --layout-sidebar-width: 350px; --layout-align: center">
      <div class="wrapper">
        <section>
          <article data-controller="midwest-card" class="midwest-card h-full">
            <div class="wrap">
              <section>
                <p class="font-semibold">Tall column</p>
                <p class="mt-2 text-sm text-gray-11">This column has more content, setting the row height.</p>
                <p class="mt-2 text-sm text-gray-11">The short column centers itself within the row.</p>
              </section>
            </div>
          </article>
      </section>
        <aside>
          <article data-controller="midwest-card" class="midwest-card h-full">
            <div class="wrap">
              <section>
                <p class="font-semibold">Short column</p>
              </section>
            </div>
          </article>
      </aside>
      </div>
    </div>
  </div>
  <div>
    <p class="text-sm text-gray-11 px-1 mb-2"><code>align: :bottom</code> — columns align to the bottom of the row</p>
    <div class="midwest-layout size-default padding-sm type-half" style="--layout-grid-gap: 2rem; --layout-sidebar-width: 350px; --layout-align: end">
      <div class="wrapper">
        <section>
          <article data-controller="midwest-card" class="midwest-card h-full">
            <div class="wrap">
              <section>
                <p class="font-semibold">Tall column</p>
                <p class="mt-2 text-sm text-gray-11">This column has more content, setting the row height.</p>
                <p class="mt-2 text-sm text-gray-11">The short column sits at the bottom of the row.</p>
              </section>
            </div>
          </article>
      </section>
        <aside>
          <article data-controller="midwest-card" class="midwest-card h-full">
            <div class="wrap">
              <section>
                <p class="font-semibold">Short column</p>
              </section>
            </div>
          </article>
      </aside>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<div class="flex flex-col gap-6">
  <div>
    <p class="text-sm text-gray-11 px-1 mb-2">Default (stretch) — both columns fill the full row height</p>
    <%= midwest_layout(type: :half, padding: :sm) do %>
      <section>
        <%= midwest_card class: "h-full" do %>
          <p class="font-semibold">Tall column</p>
          <p class="mt-2 text-sm text-gray-11">This column has more content, setting the row height.</p>
          <p class="mt-2 text-sm text-gray-11">The short column stretches to match by default.</p>
        <% end %>
      </section>
      <aside>
        <%= midwest_card class: "h-full" do %>
          <p class="font-semibold">Short column</p>
        <% end %>
      </aside>
    <% end %>
  </div>
  <div>
    <p class="text-sm text-gray-11 px-1 mb-2"><code>align: :top</code> — columns align to the top and take their natural height</p>
    <%= midwest_layout(type: :half, padding: :sm, align: :top) do %>
      <section>
        <%= midwest_card class: "h-full" do %>
          <p class="font-semibold">Tall column</p>
          <p class="mt-2 text-sm text-gray-11">This column has more content, setting the row height.</p>
          <p class="mt-2 text-sm text-gray-11">The short column no longer stretches.</p>
        <% end %>
      </section>
      <aside>
        <%= midwest_card class: "h-full" do %>
          <p class="font-semibold">Short column</p>
        <% end %>
      </aside>
    <% end %>
  </div>
  <div>
    <p class="text-sm text-gray-11 px-1 mb-2"><code>align: :center</code> — columns are vertically centered within the row</p>
    <%= midwest_layout(type: :half, padding: :sm, align: :center) do %>
      <section>
        <%= midwest_card class: "h-full" do %>
          <p class="font-semibold">Tall column</p>
          <p class="mt-2 text-sm text-gray-11">This column has more content, setting the row height.</p>
          <p class="mt-2 text-sm text-gray-11">The short column centers itself within the row.</p>
        <% end %>
      </section>
      <aside>
        <%= midwest_card class: "h-full" do %>
          <p class="font-semibold">Short column</p>
        <% end %>
      </aside>
    <% end %>
  </div>
  <div>
    <p class="text-sm text-gray-11 px-1 mb-2"><code>align: :bottom</code> — columns align to the bottom of the row</p>
    <%= midwest_layout(type: :half, padding: :sm, align: :bottom) do %>
      <section>
        <%= midwest_card class: "h-full" do %>
          <p class="font-semibold">Tall column</p>
          <p class="mt-2 text-sm text-gray-11">This column has more content, setting the row height.</p>
          <p class="mt-2 text-sm text-gray-11">The short column sits at the bottom of the row.</p>
        <% end %>
      </section>
      <aside>
        <%= midwest_card class: "h-full" do %>
          <p class="font-semibold">Short column</p>
        <% end %>
      </aside>
    <% end %>
  </div>
</div>

Align

Controls how columns align vertically within a row when they have different heights. Accepts :top, :center, :bottom, :baseline, or any CSS align-items value.

No params configured.

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

Accessibility

Figma embed for Layout/align

Annotate a preview to embed its Figma design here:

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