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
<div class="midwest-grid has-columns" style="--grid-width: 200px; --grid-gap: 1rem; --grid-columns: 3; --grid-columns-sm: 1">
  <article data-controller="midwest-card" class="midwest-card">
    <div class="wrap">
      <section>
        <p class="font-bold">Item 1</p>
      </section>
    </div>
  </article>
    
  <article data-controller="midwest-card" class="midwest-card">
    <div class="wrap">
      <section>
        <p class="font-bold">Item 2</p>
      </section>
    </div>
  </article>
    
  <article data-controller="midwest-card" class="midwest-card">
    <div class="wrap">
      <section>
        <p class="font-bold">Item 3</p>
      </section>
    </div>
  </article>
    
  <article data-controller="midwest-card" class="midwest-card">
    <div class="wrap">
      <section>
        <p class="font-bold">Item 4</p>
      </section>
    </div>
  </article>
    
  <article data-controller="midwest-card" class="midwest-card">
    <div class="wrap">
      <section>
        <p class="font-bold">Item 5</p>
      </section>
    </div>
  </article>
    
  <article data-controller="midwest-card" class="midwest-card">
    <div class="wrap">
      <section>
        <p class="font-bold">Item 6</p>
      </section>
    </div>
  </article>
</div>
1
2
3
4
5
6
7
<%= midwest_grid(columns: (params[:columns] || 3).to_i, columns_sm: (params[:columns_sm] || 1).to_i, gap: 1) do %>
  <% 6.times do |i| %>
    <%= midwest_card do %>
      <p class="font-bold">Item <%= i + 1 %></p>
    <% end %>
  <% end %>
<% end %>

Fixed Columns

Use columns: to specify an exact number of columns instead of relying on auto-fit. Pair with columns_sm: to collapse the grid on mobile.

Param Description Input

Columns on desktop (default: 3)

Columns on mobile ≤ 640 px (default: 1)

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

Accessibility

Figma embed for Grid/fixed_columns

Annotate a preview to embed its Figma design here:

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