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
<div class="flex flex-wrap gap-4 items-center p-4">
  <span class="midwest-avatar size-default theme-violet shape-circle" title="You tabbed on an Avatar for Alice Adams">
    <div class="letter" title="Alice Adams">
      AA
    </div>
  </span>
  <span class="midwest-avatar size-default theme-blue shape-circle" title="You tabbed on an Avatar for Bob Baker">
    <div class="letter" title="Bob Baker">
      BB
    </div>
  </span>
  <span class="midwest-avatar size-default theme-violet shape-circle" title="You tabbed on an Avatar for Carol Clark">
    <div class="letter" title="Carol Clark">
      CC
    </div>
  </span>
  <span class="midwest-avatar size-default theme-indigo shape-circle" title="You tabbed on an Avatar for Dave Davis">
    <div class="letter" title="Dave Davis">
      DD
    </div>
  </span>
  <span class="midwest-avatar size-default theme-blue shape-circle" title="You tabbed on an Avatar for Eve Evans">
    <div class="letter" title="Eve Evans">
      EE
    </div>
  </span>
  <span class="midwest-avatar size-default theme-magenta shape-circle" title="You tabbed on an Avatar for Frank Fisher">
    <div class="letter" title="Frank Fisher">
      FF
    </div>
  </span>
</div>
1
2
3
4
5
6
7
8
<div class="flex flex-wrap gap-4 items-center p-4">
  <%= midwest_avatar(name: 'Alice Adams', shape: :circle, color: :auto) %>
  <%= midwest_avatar(name: 'Bob Baker', shape: :circle, color: :auto) %>
  <%= midwest_avatar(name: 'Carol Clark', shape: :circle, color: :auto) %>
  <%= midwest_avatar(name: 'Dave Davis', shape: :circle, color: :auto) %>
  <%= midwest_avatar(name: 'Eve Evans', shape: :circle, color: :auto) %>
  <%= midwest_avatar(name: 'Frank Fisher', shape: :circle, color: :auto) %>
</div>

Auto colour

Pass color: :auto to derive a stable theme from the name. Each name gets a consistent — but different — colour, so a list of people reads as visually distinct without hand-assigning themes.

No params configured.

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

Accessibility

Figma embed for Avatar/auto_color

Annotate a preview to embed its Figma design here:

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