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
<div class="flex gap-4 items-center p-4">
  <span class="midwest-avatar size-xs theme-red shape-circle" title="You tabbed on an Avatar for John Doe">
    <div class="letter" title="John Doe">
      J
    </div>
  </span>
  <span class="midwest-avatar size-xs theme-red shape-circle" title="You tabbed on an Avatar for Jane Smith">
    <div class="letter" title="Jane Smith">
      J
    </div>
  </span>
  <span class="midwest-avatar size-xs theme-red shape-circle" title="You tabbed on an Avatar for Prince">
    <div class="letter" title="Prince">
      P
    </div>
  </span>
  <span class="midwest-avatar size-sm theme-red shape-circle" title="You tabbed on an Avatar for Ada Lovelace">
    <div class="letter" title="Ada Lovelace">
      AL
    </div>
  </span>
  <span class="midwest-avatar size-default theme-red shape-circle" title="You tabbed on an Avatar for Ada Lovelace">
    <div class="letter" title="Ada Lovelace">
      AL
    </div>
  </span>
</div>
1
2
3
4
5
6
7
<div class="flex gap-4 items-center p-4">
  <%= midwest_avatar(name: 'John Doe', shape: :circle, size: :xs) %>
  <%= midwest_avatar(name: 'Jane Smith', shape: :circle, size: :xs) %>
  <%= midwest_avatar(name: 'Prince', shape: :circle, size: :xs) %>
  <%= midwest_avatar(name: 'Ada Lovelace', shape: :circle, size: :sm) %>
  <%= midwest_avatar(name: 'Ada Lovelace', shape: :circle, size: :default) %>
</div>

Extra small

The xs size is too small for two letters, so it always renders a single initial regardless of how many words the name has.

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

Annotate a preview to embed its Figma design here:

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