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
<div class="midwest-layout size-default padding-default type-default" style="--layout-grid-gap: 2rem; --layout-sidebar-width: 350px">
  <div class="wrapper">
    <section>
      <article data-controller="midwest-card" class="midwest-card">
        <div class="wrap">
          <header class="flex">        
            <h4>Header</h4>
            <button class="bg-theme-6 hover:bg-theme-6 text-white font-bold py-1 px-3 rounded">Neat</button>
          </header>
          <section>        
            <h4>Section</h4>
            <button class="bg-theme-6 hover:bg-theme-6 text-white font-bold py-1 px-3 rounded">Neat</button>
          </section>
          <footer class="flex">        
            <h4>Footer</h4>
            <button class="bg-theme-6 hover:bg-theme-6 text-white font-bold py-1 px-3 rounded">Neat</button>
          </footer>
        </div>
      </article>
  </section>
    <aside>
      <article data-controller="midwest-card" class="midwest-card">
        <div class="wrap">
          <header class="flex">        
            <h4>Header</h4>
            <button class="bg-theme-6 hover:bg-theme-6 text-white font-bold py-1 px-3 rounded">Neat</button>
          </header>
          <section>        
            <h4>Section</h4>
            <button class="bg-theme-6 hover:bg-theme-6 text-white font-bold py-1 px-3 rounded">Neat</button>
          </section>
          <footer class="flex">        
            <h4>Footer</h4>
            <button class="bg-theme-6 hover:bg-theme-6 text-white font-bold py-1 px-3 rounded">Neat</button>
          </footer>
        </div>
      </article>
  </aside>
    <article data-controller="midwest-card" class="midwest-card">
      <div class="wrap">
        <header class="flex">      
          <h4>Header</h4>
          <button class="bg-theme-6 hover:bg-theme-6 text-white font-bold py-1 px-3 rounded">Neat</button>
        </header>
        <section>      
          <h4>Section</h4>
          <button class="bg-theme-6 hover:bg-theme-6 text-white font-bold py-1 px-3 rounded">Neat</button>
        </section>
        <footer class="flex">      
          <h4>Footer</h4>
          <button class="bg-theme-6 hover:bg-theme-6 text-white font-bold py-1 px-3 rounded">Neat</button>
        </footer>
      </div>
    </article>
  </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
<%= midwest_layout(
  type: params[:type] || :default,
  size: params[:size] || :default,
  padding: params[:padding] || :default,
  gap: params[:gap] || 2,
  sidebar_width: params[:sidebar_width] || 350,
  nav_label: params[:nav_label].presence,
  sidebar_label: params[:sidebar_label].presence,
  align: params[:align].presence&.to_sym,
  align_content: params[:align_content].presence&.to_sym,
  height: params[:height].presence&.to_sym
) do %>
  <section>
    <%= midwest_card do |card| %>
      <% card.with_header(class: "flex") do %>
        <h4>Header</h4>
        <button class="bg-theme-6 hover:bg-theme-6 text-white font-bold py-1 px-3 rounded">Neat</button>
      <% end %>
      <% card.with_section do %>
        <h4>Section</h4>
        <button class="bg-theme-6 hover:bg-theme-6 text-white font-bold py-1 px-3 rounded">Neat</button>
      <% end %>
      <% card.with_footer(class: "flex") do %>
        <h4>Footer</h4>
        <button class="bg-theme-6 hover:bg-theme-6 text-white font-bold py-1 px-3 rounded">Neat</button>
      <% end %>
    <% end %>
  </section>
  <aside>
    <%= midwest_card do |card| %>
      <% card.with_header(class: "flex") do %>
        <h4>Header</h4>
        <button class="bg-theme-6 hover:bg-theme-6 text-white font-bold py-1 px-3 rounded">Neat</button>
      <% end %>
      <% card.with_section do %>
        <h4>Section</h4>
        <button class="bg-theme-6 hover:bg-theme-6 text-white font-bold py-1 px-3 rounded">Neat</button>
      <% end %>
      <% card.with_footer(class: "flex") do %>
        <h4>Footer</h4>
        <button class="bg-theme-6 hover:bg-theme-6 text-white font-bold py-1 px-3 rounded">Neat</button>
      <% end %>
    <% end %>
  </aside>
  <%= midwest_card do |card| %>
    <% card.with_header(class: "flex") do %>
      <h4>Header</h4>
      <button class="bg-theme-6 hover:bg-theme-6 text-white font-bold py-1 px-3 rounded">Neat</button>
    <% end %>
    <% card.with_section do %>
      <h4>Section</h4>
      <button class="bg-theme-6 hover:bg-theme-6 text-white font-bold py-1 px-3 rounded">Neat</button>
    <% end %>
    <% card.with_footer(class: "flex") do %>
      <h4>Footer</h4>
      <button class="bg-theme-6 hover:bg-theme-6 text-white font-bold py-1 px-3 rounded">Neat</button>
    <% end %>
  <% end %>
<% end %>

Playground

This example uses dynamic preview parameters which can be edited live in the Lookbook UI

Param Description Input

The list of available layouts.

The list of available sizes.

The list of available paddings.

Gap is used to calcualte the space between items in the layout, and padding on the left and right.

sidebar width is used when working with locked sidebars. They'll have a minimum width of a specific pixel size, while everything else flows.

Accessible aria-label for the nav landmark

Accessible aria-label for the aside landmark

Vertical alignment of columns within a row

Vertical distribution of rows within the wrapper

Set :fill to make the layout stretch to its parent's height

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

Accessibility