Midwest Component Library v0.28.2

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
<ul role="list" style="--masonry-columns: 4; --masonry-gap: 1rem;" class="midwest-masonry">
  <li class="midwest-masonry-item">
    <div class="rounded-lg bg-theme-2 dark:bg-theme-10 text-theme-11 dark:text-theme-2 flex items-center justify-center font-semibold"
           style="height: 160px">
      Tile 1
    </div>
  </li>
  <li class="midwest-masonry-item">
    <div class="rounded-lg bg-theme-2 dark:bg-theme-10 text-theme-11 dark:text-theme-2 flex items-center justify-center font-semibold"
           style="height: 240px">
      Tile 2
    </div>
  </li>
  <li class="midwest-masonry-item">
    <div class="rounded-lg bg-theme-2 dark:bg-theme-10 text-theme-11 dark:text-theme-2 flex items-center justify-center font-semibold"
           style="height: 120px">
      Tile 3
    </div>
  </li>
  <li class="midwest-masonry-item">
    <div class="rounded-lg bg-theme-2 dark:bg-theme-10 text-theme-11 dark:text-theme-2 flex items-center justify-center font-semibold"
           style="height: 300px">
      Tile 4
    </div>
  </li>
  <li class="midwest-masonry-item">
    <div class="rounded-lg bg-theme-2 dark:bg-theme-10 text-theme-11 dark:text-theme-2 flex items-center justify-center font-semibold"
           style="height: 180px">
      Tile 5
    </div>
  </li>
  <li class="midwest-masonry-item">
    <div class="rounded-lg bg-theme-2 dark:bg-theme-10 text-theme-11 dark:text-theme-2 flex items-center justify-center font-semibold"
           style="height: 220px">
      Tile 6
    </div>
  </li>
  <li class="midwest-masonry-item">
    <div class="rounded-lg bg-theme-2 dark:bg-theme-10 text-theme-11 dark:text-theme-2 flex items-center justify-center font-semibold"
           style="height: 140px">
      Tile 7
    </div>
  </li>
  <li class="midwest-masonry-item">
    <div class="rounded-lg bg-theme-2 dark:bg-theme-10 text-theme-11 dark:text-theme-2 flex items-center justify-center font-semibold"
           style="height: 260px">
      Tile 8
    </div>
  </li>
  <li class="midwest-masonry-item">
    <div class="rounded-lg bg-theme-2 dark:bg-theme-10 text-theme-11 dark:text-theme-2 flex items-center justify-center font-semibold"
           style="height: 200px">
      Tile 9
    </div>
  </li>
  <li class="midwest-masonry-item">
    <div class="rounded-lg bg-theme-2 dark:bg-theme-10 text-theme-11 dark:text-theme-2 flex items-center justify-center font-semibold"
           style="height: 150px">
      Tile 10
    </div>
  </li>
  <li class="midwest-masonry-item">
    <div class="rounded-lg bg-theme-2 dark:bg-theme-10 text-theme-11 dark:text-theme-2 flex items-center justify-center font-semibold"
           style="height: 280px">
      Tile 11
    </div>
  </li>
  <li class="midwest-masonry-item">
    <div class="rounded-lg bg-theme-2 dark:bg-theme-10 text-theme-11 dark:text-theme-2 flex items-center justify-center font-semibold"
           style="height: 190px">
      Tile 12
    </div>
  </li>
  <li class="midwest-masonry-item">
    <div class="rounded-lg bg-theme-2 dark:bg-theme-10 text-theme-11 dark:text-theme-2 flex items-center justify-center font-semibold"
           style="height: 170px">
      Tile 13
    </div>
  </li>
  <li class="midwest-masonry-item">
    <div class="rounded-lg bg-theme-2 dark:bg-theme-10 text-theme-11 dark:text-theme-2 flex items-center justify-center font-semibold"
           style="height: 230px">
      Tile 14
    </div>
  </li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
<% heights = [160, 240, 120, 300, 180, 220, 140, 260, 200, 150, 280, 190, 170, 230] %>
<%= midwest_masonry(columns: 4) do |m| %>
  <% heights.each_with_index do |h, i| %>
    <% m.with_item do %>
      <div class="rounded-lg bg-theme-2 dark:bg-theme-10 text-theme-11 dark:text-theme-2 flex items-center justify-center font-semibold"
           style="height: <%= h %>px">
        Tile <%= i + 1 %>
      </div>
    <% end %>
  <% end %>
<% end %>

Columns

The desktop column count is set with columns: (here, four).

No params configured.

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

Accessibility

Figma embed for Masonry/columns

Annotate a preview to embed its Figma design here:

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