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
<div class="flex flex-col items-start gap-6 p-8">
  <div class="midwest-group size-default gap-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>
    <span class="midwest-badge size-default theme-primary midwest-group-overflow">
      <span class="value">+2 more</span>
    </span>
  </div>
  <div class="midwest-group size-default gap-default" role="group">
    <span class="midwest-badge size-default theme-cyan">
      <span class="value">Design</span>
    </span>
    <span class="midwest-badge size-default theme-green">
      <span class="value">Frontend</span>
    </span>
    <span class="midwest-badge size-default theme-orange">
      <span class="value">Backend</span>
    </span>
    <span class="midwest-badge size-default theme-primary midwest-group-overflow">
      <span class="value">+2 more</span>
    </span>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="flex flex-col items-start gap-6 p-8">
  <%# Avatars with overflow %>
  <%= render Midwest::GroupComponent.new(max: 4, gap: :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) } %>
    <% group.with_item { render Midwest::AvatarComponent.new(name: "Eve", shape: :circle) } %>
    <% group.with_item { render Midwest::AvatarComponent.new(name: "Frank", shape: :circle) } %>
  <% end %>
  <%# Mixed content %>
  <%= render Midwest::GroupComponent.new(max: 3) do |group| %>
    <% group.with_item { render Midwest::BadgeComponent.new("Design", state: :info) } %>
    <% group.with_item { render Midwest::BadgeComponent.new("Frontend", state: :success) } %>
    <% group.with_item { render Midwest::BadgeComponent.new("Backend", state: :warning) } %>
    <% group.with_item { render Midwest::BadgeComponent.new("DevOps", state: :error) } %>
    <% group.with_item { render Midwest::BadgeComponent.new("QA") } %>
  <% end %>
</div>

With Avatars

Group works with any component — here it wraps avatars with overflow.

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

Annotate a preview to embed its Figma design here:

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