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
<div class="flex flex-col items-start gap-8 p-8">
  <div>
    <p class="text-sm text-gray-11 mb-2">overlap_sm (-0.25rem)</p>
    <div class="midwest-group size-default gap-overlap-sm" role="group">
      <span class="midwest-avatar size-default theme-red shape-circle" title="You tabbed on an Avatar for Alice">
        <div class="letter" title="Alice">
          A
        </div>
      </span>
      <span class="midwest-avatar size-default theme-red shape-circle" title="You tabbed on an Avatar for Bob">
        <div class="letter" title="Bob">
          B
        </div>
      </span>
      <span class="midwest-avatar size-default theme-red shape-circle" title="You tabbed on an Avatar for Carol">
        <div class="letter" title="Carol">
          C
        </div>
      </span>
      <span class="midwest-avatar size-default theme-red shape-circle" title="You tabbed on an Avatar for Dave">
        <div class="letter" title="Dave">
          D
        </div>
      </span>
    </div>
  </div>
  <div>
    <p class="text-sm text-gray-11 mb-2">overlap (-0.5rem)</p>
    <div class="midwest-group size-default gap-overlap" role="group">
      <span class="midwest-avatar size-default theme-red shape-circle" title="You tabbed on an Avatar for Alice">
        <div class="letter" title="Alice">
          A
        </div>
      </span>
      <span class="midwest-avatar size-default theme-red shape-circle" title="You tabbed on an Avatar for Bob">
        <div class="letter" title="Bob">
          B
        </div>
      </span>
      <span class="midwest-avatar size-default theme-red shape-circle" title="You tabbed on an Avatar for Carol">
        <div class="letter" title="Carol">
          C
        </div>
      </span>
      <span class="midwest-avatar size-default theme-red shape-circle" title="You tabbed on an Avatar for Dave">
        <div class="letter" title="Dave">
          D
        </div>
      </span>
    </div>
  </div>
  <div>
    <p class="text-sm text-gray-11 mb-2">overlap_lg (-1rem)</p>
    <div class="midwest-group size-default gap-overlap-lg" role="group">
      <span class="midwest-avatar size-default theme-red shape-circle" title="You tabbed on an Avatar for Alice">
        <div class="letter" title="Alice">
          A
        </div>
      </span>
      <span class="midwest-avatar size-default theme-red shape-circle" title="You tabbed on an Avatar for Bob">
        <div class="letter" title="Bob">
          B
        </div>
      </span>
      <span class="midwest-avatar size-default theme-red shape-circle" title="You tabbed on an Avatar for Carol">
        <div class="letter" title="Carol">
          C
        </div>
      </span>
      <span class="midwest-avatar size-default theme-red shape-circle" title="You tabbed on an Avatar for Dave">
        <div class="letter" title="Dave">
          D
        </div>
      </span>
    </div>
  </div>
  <div>
    <p class="text-sm text-gray-11 mb-2">Overlapping badges with max</p>
    <div class="midwest-group size-default gap-overlap-sm" role="group">
      <span class="midwest-badge size-default theme-red">
        <span class="value">Ruby</span>
      </span>
      <span class="midwest-badge size-default theme-green">
        <span class="value">Rails</span>
      </span>
      <span class="midwest-badge size-default theme-orange">
        <span class="value">JS</span>
      </span>
      <span class="midwest-badge size-default theme-cyan">
        <span class="value">TS</span>
      </span>
      <span class="midwest-badge size-default theme-primary midwest-group-overflow">
        <span class="value">+2 more</span>
      </span>
    </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
<div class="flex flex-col items-start gap-8 p-8">
  <%# Small overlap %>
  <div>
    <p class="text-sm text-gray-11 mb-2">overlap_sm (-0.25rem)</p>
    <%= render Midwest::GroupComponent.new(gap: :overlap_sm) do |group| %>
      <% group.with_item { render Midwest::AvatarComponent.new(name: "Alice", shape: :circle) } %>
      <% group.with_item { render Midwest::AvatarComponent.new(name: "Bob", shape: :circle) } %>
      <% group.with_item { render Midwest::AvatarComponent.new(name: "Carol", shape: :circle) } %>
      <% group.with_item { render Midwest::AvatarComponent.new(name: "Dave", shape: :circle) } %>
    <% end %>
  </div>
  <%# Default overlap %>
  <div>
    <p class="text-sm text-gray-11 mb-2">overlap (-0.5rem)</p>
    <%= render Midwest::GroupComponent.new(gap: :overlap) do |group| %>
      <% group.with_item { render Midwest::AvatarComponent.new(name: "Alice", shape: :circle) } %>
      <% group.with_item { render Midwest::AvatarComponent.new(name: "Bob", shape: :circle) } %>
      <% group.with_item { render Midwest::AvatarComponent.new(name: "Carol", shape: :circle) } %>
      <% group.with_item { render Midwest::AvatarComponent.new(name: "Dave", shape: :circle) } %>
    <% end %>
  </div>
  <%# Large overlap %>
  <div>
    <p class="text-sm text-gray-11 mb-2">overlap_lg (-1rem)</p>
    <%= render Midwest::GroupComponent.new(gap: :overlap_lg) do |group| %>
      <% group.with_item { render Midwest::AvatarComponent.new(name: "Alice", shape: :circle) } %>
      <% group.with_item { render Midwest::AvatarComponent.new(name: "Bob", shape: :circle) } %>
      <% group.with_item { render Midwest::AvatarComponent.new(name: "Carol", shape: :circle) } %>
      <% group.with_item { render Midwest::AvatarComponent.new(name: "Dave", shape: :circle) } %>
    <% end %>
  </div>
  <%# Overlap with badges %>
  <div>
    <p class="text-sm text-gray-11 mb-2">Overlapping badges with max</p>
    <%= render Midwest::GroupComponent.new(gap: :overlap_sm, max: 4) do |group| %>
      <% group.with_item { render Midwest::BadgeComponent.new("Ruby", state: :error) } %>
      <% group.with_item { render Midwest::BadgeComponent.new("Rails", state: :success) } %>
      <% group.with_item { render Midwest::BadgeComponent.new("JS", state: :warning) } %>
      <% group.with_item { render Midwest::BadgeComponent.new("TS", state: :info) } %>
      <% group.with_item { render Midwest::BadgeComponent.new("CSS") } %>
      <% group.with_item { render Midwest::BadgeComponent.new("HTML") } %>
    <% end %>
  </div>
</div>

Overlap

Use negative-gap overlap values (overlap_sm, overlap, overlap_lg) to layer items on top of each other — like stacked cards or avatars.

No params configured.

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

Accessibility

Figma embed for Group/overlap

Annotate a preview to embed its Figma design here:

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