x
1
2
3
4
5
<span class="midwest-avatar size-default theme-red shape-square" title="You tabbed on an Avatar for Midwest Design"> <div class="letter" title="Midwest Design"> MD </div></span>1
<%= midwest_avatar(size: params[:size] || :default, shape: params[:shape] || :square, color: params[:color] || :red, name: params[:name] || 'Midwest Design', src: params[:src] || nil, icon: params[:icon] || nil) %>Playground
This example uses dynamic preview parameters which can be edited live in the Lookbook UI
| Param | Description | Input |
|---|---|---|
|
The list of available sizes. |
|
|
|
The list of available shapes. |
|
|
|
The list of available colors. |
|
|
|
Full name — initials are derived automatically (e.g. 'Jane Smith' → 'JS') |
|
|
|
The url to an image |
|
|
|
The list of available icons. |
|
No assets to display.
Add a .js or .css file alongside the component to see it here.