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
<div class="flex flex-col items-start gap-6 p-8">
  <div class="midwest-group size-default gap-default" role="group">
    <span class="midwest-badge size-default theme-primary">
      <span class="value">Ruby</span>
    </span>
    <span class="midwest-badge size-default theme-primary">
      <span class="value">Rails</span>
    </span>
    <span class="midwest-badge size-default theme-primary">
      <span class="value">JavaScript</span>
    </span>
    <span class="midwest-badge size-default theme-primary">
      <span class="value">TypeScript</span>
    </span>
  </div>
  <div class="midwest-group size-sm gap-default" role="group">
    <span class="midwest-badge size-sm theme-primary">
      <span class="value">Small</span>
    </span>
    <span class="midwest-badge size-sm theme-primary">
      <span class="value">Group</span>
    </span>
    <span class="midwest-badge size-sm theme-primary">
      <span class="value">Items</span>
    </span>
  </div>
  <div class="midwest-group size-lg gap-default" role="group">
    <span class="midwest-badge size-lg theme-primary">
      <span class="value">Large</span>
    </span>
    <span class="midwest-badge size-lg theme-primary">
      <span class="value">Group</span>
    </span>
    <span class="midwest-badge size-lg theme-primary">
      <span class="value">Items</span>
    </span>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="flex flex-col items-start gap-6 p-8">
  <%# Default group with badges %>
  <%= render Midwest::GroupComponent.new do |group| %>
    <% group.with_item { render Midwest::BadgeComponent.new("Ruby") } %>
    <% group.with_item { render Midwest::BadgeComponent.new("Rails") } %>
    <% group.with_item { render Midwest::BadgeComponent.new("JavaScript") } %>
    <% group.with_item { render Midwest::BadgeComponent.new("TypeScript") } %>
  <% end %>
  <%# Different sizes %>
  <%= render Midwest::GroupComponent.new(size: :sm) do |group| %>
    <% group.with_item { render Midwest::BadgeComponent.new("Small", size: :sm) } %>
    <% group.with_item { render Midwest::BadgeComponent.new("Group", size: :sm) } %>
    <% group.with_item { render Midwest::BadgeComponent.new("Items", size: :sm) } %>
  <% end %>
  <%= render Midwest::GroupComponent.new(size: :lg) do |group| %>
    <% group.with_item { render Midwest::BadgeComponent.new("Large", size: :lg) } %>
    <% group.with_item { render Midwest::BadgeComponent.new("Group", size: :lg) } %>
    <% group.with_item { render Midwest::BadgeComponent.new("Items", size: :lg) } %>
  <% end %>
</div>

Default

A horizontal cluster of items. Accepts any content in each slot.

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

Annotate a preview to embed its Figma design here:

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