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
<div class="flex flex-col gap-2">
  <p class="text-sm text-gray-11 px-1">The layout fills its parent's height. Useful inside a fixed-height shell (e.g. an app frame or a sidebar layout).</p>
  <div class="h-[calc(100vh-2rem)] border border-dashed border-gray-6 rounded-lg overflow-hidden">
    <div class="midwest-layout size-default padding-sm type-sidebar height-fill" style="--layout-grid-gap: 2rem; --layout-sidebar-width: 350px">
      <div class="wrapper">
        <section class="h-full">
          <article data-controller="midwest-card" class="midwest-card h-full">
            <div class="wrap">
              <section>
                <p class="font-semibold">Main content</p>
                <p class="mt-1 text-sm text-gray-11">The layout stretches to fill the 256 px parent.</p>
              </section>
            </div>
          </article>
      </section>
        <aside class="h-full">
          <article data-controller="midwest-card" class="midwest-card h-full">
            <div class="wrap">
              <section>
                <p class="font-semibold">Sidebar</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
<div class="flex flex-col gap-2">
  <p class="text-sm text-gray-11 px-1">The layout fills its parent's height. Useful inside a fixed-height shell (e.g. an app frame or a sidebar layout).</p>
  <div class="h-[calc(100vh-2rem)] border border-dashed border-gray-6 rounded-lg overflow-hidden">
    <%= midwest_layout(type: :sidebar, padding: :sm, height: :fill) do %>
      <section class="h-full">
        <%= midwest_card class: "h-full" do %>
          <p class="font-semibold">Main content</p>
          <p class="mt-1 text-sm text-gray-11">The layout stretches to fill the 256 px parent.</p>
        <% end %>
      </section>
      <aside class="h-full">
        <%= midwest_card class: "h-full" do %>
          <p class="font-semibold">Sidebar</p>
        <% end %>
      </aside>
    <% end %>
  </div>
</div>

Height fill

Pass height: :fill to make the layout and its wrapper stretch to 100% of their parent's height. Useful inside app shells or fixed-height containers.

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

Annotate a preview to embed its Figma design here:

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