x
1
2
3
4
5
6
7
8
9
<div class="flex items-center gap-3 w-72"> <div class="midwest-skeleton is-animated is-round h-10 w-10 shrink-0"></div> <div class="flex-1"> <div class="midwest-skeleton__lines is-animated"> <div class="midwest-skeleton__line "></div> <div class="midwest-skeleton__line is-short"></div> </div> </div></div>1
2
3
4
5
6
<div class="flex items-center gap-3 w-72"> <%= midwest_skeleton(round: true, class: "h-10 w-10 shrink-0") %> <div class="flex-1"> <%= midwest_skeleton(lines: 2) %> </div></div>Avatar and text
Combine a round skeleton with text lines to sketch an avatar + name layout.
No params configured.
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Skeleton/avatar_and_text
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."