Building Materials Marketplace

Avatars


<MudAvatar Class="me-2" Square="true">
    <MudImage Src="../assets/images/faces/1.jpg"></MudImage>
</MudAvatar>
<MudAvatar Class="me-2" Rounded="true">
    <MudImage Src="../assets/images/faces/2.jpg"></MudImage>
</MudAvatar>
<MudAvatar Class="me-2">
    <MudImage Src="../assets/images/faces/3.jpg"></MudImage>
</MudAvatar>

Avatar Sizes

Avatars of different sizes


<MudAvatar Rounded="true" Class="mud-avatar-xs me-2">
    <MudImage Src="../assets/images/faces/4.jpg"></MudImage>
</MudAvatar>
<MudAvatar Size="Size.Small" Rounded="true" Class="me-2">
    <MudImage Src="../assets/images/faces/5.jpg"></MudImage>
</MudAvatar>
<MudAvatar Size="Size.Medium" Rounded="true" Class="me-2">
    <MudImage Src="../assets/images/faces/6.jpg"></MudImage>
</MudAvatar>
<MudAvatar Size="Size.Large" Rounded="true" Class="me-2">
    <MudImage Src="../assets/images/faces/7.jpg"></MudImage>
</MudAvatar>
<MudAvatar Rounded="true" Class="mud-avatar-xl me-2">
    <MudImage Src="../assets/images/faces/8.jpg"></MudImage>
</MudAvatar>
<MudAvatar Rounded="true" Class="mud-avatar-xxl me-2">
    <MudImage Src="../assets/images/faces/9.jpg"></MudImage>
</MudAvatar>

Avatar With Icons

Avatar contains icons to perform respective action


<MudBadge Color="Color.Success" Icon="fe fe-camera" Overlap="true" Bordered="true">
<MudAvatar Class="mud-avatar-xs me-2">
    <MudImage Src="../assets/images/faces/2.jpg"></MudImage>
</MudAvatar>
</MudBadge>
<MudBadge Color="Color.Secondary" Icon="fe fe-edit" Overlap="true" Bordered="true">
<MudAvatar Size="Size.Small" Class="me-2">
    <MudImage Src="../assets/images/faces/3.jpg"></MudImage>
</MudAvatar>
</MudBadge>
<MudBadge Color="Color.Warning" Icon="fe fe-plus" Overlap="true" Bordered="true">
<MudAvatar Size="Size.Medium" Class="me-2">
    <MudImage Src="../assets/images/faces/14.jpg"></MudImage>
</MudAvatar>
</MudBadge>
<MudBadge Color="Color.Info" Icon="fe fe-camera" Overlap="true" Bordered="true">
<MudAvatar Size="Size.Large" Class="me-2">
    <MudImage Src="../assets/images/faces/14.jpg"></MudImage>
</MudAvatar>
</MudBadge>
<MudBadge Color="Color.Success" Icon="fe fe-edit" Overlap="true" Bordered="true">
<MudAvatar Class="mud-avatar-xl me-2">
    <MudImage Src="../assets/images/faces/14.jpg"></MudImage>
</MudAvatar>
</MudBadge>
<MudBadge Color="Color.Error" Icon="fe fe-plus" Overlap="true" Bordered="true">
<MudAvatar Class="mud-avatar-xxl me-2">
    <MudImage Src="../assets/images/faces/14.jpg"></MudImage>
</MudAvatar>
</MudBadge>

Avatar With Online Status Indicators

avatars having online status indicator.


<MudBadge Color="Color.Success" Origin="Origin.BottomRight" Overlap="true" Bordered="true" Dot="true"  class="avatar-badge-xs">
<MudAvatar Class="mud-avatar-xs me-2">
    <MudImage Src="../assets/images/faces/8.jpg"></MudImage>
</MudAvatar>
</MudBadge>
<MudBadge Color="Color.Success" Origin="Origin.BottomRight" Overlap="true" Bordered="true" Dot="true"  class="avatar-badge-small">
<MudAvatar Class="me-2" Size="Size.Small">
    <MudImage Src="../assets/images/faces/10.jpg"></MudImage>
</MudAvatar>
</MudBadge>
<MudBadge Color="Color.Success" Origin="Origin.BottomRight" Overlap="true" Dot="true"  class="avatar-badge-medium">
<MudAvatar Class="me-2" Size="Size.Medium">
    <MudImage Src="../assets/images/faces/12.jpg"></MudImage>
</MudAvatar>
</MudBadge>
<MudBadge Color="Color.Success" Origin="Origin.BottomRight" Overlap="true" Dot="true"  class="avatar-badge-large">
<MudAvatar Size="Size.Large" Class="me-2">
    <MudImage Src="../assets/images/faces/13.jpg"></MudImage>
</MudAvatar>
</MudBadge>
<MudBadge Color="Color.Success" Origin="Origin.BottomRight" Overlap="true" Dot="true"  class="avatar-badge-xl">
<MudAvatar  Class="mud-avatar-xl me-2">
    <MudImage Src="../assets/images/faces/14.jpg"></MudImage>
</MudAvatar>
</MudBadge>
<MudBadge Color="Color.Success" Origin="Origin.BottomRight" Overlap="true" Dot="true"  class="avatar-badge-xxl">
<MudAvatar Class="mud-avatar-xxl me-2">
    <MudImage Src="../assets/images/faces/15.jpg"></MudImage>
</MudAvatar>
</MudBadge>

Avatar With Offline Status Indicators

avatars having a offline status indicator


<MudBadge Origin="Origin.BottomRight" Overlap="true" Bordered="true" Dot="true"  class="avatar-badge-xs">
<MudAvatar Class="mud-avatar-xs me-2">
    <MudImage Src="../assets/images/faces/2.jpg"></MudImage>
</MudAvatar>
</MudBadge>
<MudBadge Origin="Origin.BottomRight" Overlap="true" Bordered="true" Dot="true"  class="avatar-badge-small">
<MudAvatar Class="me-2" Size="Size.Small">
    <MudImage Src="../assets/images/faces/3.jpg"></MudImage>
</MudAvatar>
</MudBadge>
<MudBadge Origin="Origin.BottomRight" Overlap="true" Dot="true"  class="avatar-badge-medium">
<MudAvatar Class="me-2" Size="Size.Medium">
    <MudImage Src="../assets/images/faces/4.jpg"></MudImage>
</MudAvatar>
</MudBadge>
<MudBadge Origin="Origin.BottomRight" Overlap="true" Dot="true"  class="avatar-badge-large">
<MudAvatar Size="Size.Large" Class="me-2">
    <MudImage Src="../assets/images/faces/5.jpg"></MudImage>
</MudAvatar>
</MudBadge>
<MudBadge Origin="Origin.BottomRight" Overlap="true" Dot="true"  class="avatar-badge-xl">
<MudAvatar Class="mud-avatar-xl me-2">
    <MudImage Src="../assets/images/faces/6.jpg"></MudImage>
</MudAvatar>
</MudBadge>
<MudBadge Origin="Origin.BottomRight" Overlap="true" Dot="true"  class="avatar-badge-xxl">
<MudAvatar Class="mud-avatar-xxl me-2">
    <MudImage Src="../assets/images/faces/7.jpg"></MudImage>
</MudAvatar>
</MudBadge>

Avatars With Number Badges

Avatar numbers indicates the no. of unread notifications/messages

2

5

1

7

3

9


<MudBadge Color="Color.Primary" Content="5" Overlap="true" Bordered="true">
<MudAvatar Class="mud-avatar-xs me-2">
    <MudImage Src="../assets/images/faces/1.jpg"></MudImage>
</MudAvatar>
</MudBadge>
<MudBadge Color="Color.Secondary" Content="5" Overlap="true" Bordered="true">
<MudAvatar Size="Size.Small" Class="me-2">
    <MudImage Src="../assets/images/faces/2.jpg"></MudImage>
</MudAvatar>
</MudBadge>
<MudBadge Color="Color.Warning" Content="7" Overlap="true" Bordered="true">
<MudAvatar Size="Size.Medium" Class="me-2">
    <MudImage Src="../assets/images/faces/3.jpg"></MudImage>
</MudAvatar>
</MudBadge>
<MudBadge Color="Color.Info" Content="7" Overlap="true" Bordered="true">
<MudAvatar Size="Size.Large" Class="me-2">
    <MudImage Src="../assets/images/faces/3.jpg"></MudImage>
</MudAvatar>
</MudBadge>
<MudBadge Color="Color.Success" Content="9" Overlap="true" Bordered="true">
<MudAvatar Class="mud-avatar-xl me-2">
    <MudImage Src="../assets/images/faces/3.jpg"></MudImage>
</MudAvatar>
</MudBadge>
<MudBadge Color="Color.Error" Content="9" Overlap="true" Bordered="true">
<MudAvatar Class="mud-avatar-xxl me-2">
    <MudImage Src="../assets/images/faces/3.jpg"></MudImage>
</MudAvatar>
</MudBadge>

Avatar With Initials

Avatar contains intials when user profile doesn't exist

XS

SM

MD

LG

XL

XXL


<MudAvatar Class="mud-avatar-xs me-2" Rounded="true" Color="Color.Primary">
    XS
</MudAvatar>
<MudAvatar Size="Size.Small" Class="ma-2" Rounded="true" Color="Color.Secondary">
    SM
</MudAvatar>
<MudAvatar Size="Size.Medium" Class="ma-2" Rounded="true" Color="Color.Warning">
    MD
</MudAvatar>
<MudAvatar Size="Size.Large" Class="ma-2" Rounded="true" Color="Color.Error">
    LG
</MudAvatar>
<MudAvatar Class="mud-avatar-xl ma-2" Rounded="true" Color="Color.Success">
    XL
</MudAvatar>
<MudAvatar Class="mud-avatar-xxl ma-2" Rounded="true" Color="Color.Info">
    XXL
</MudAvatar>

Stacked Avatars

Group of avatars stacked together

+8


<MudAvatarGroup Max="6" Spacing="0" MaxColor="Color.Primary">
<Rounded="true">
    <MudImage Src="../assets/images/faces/2.jpg"></MudImage>
</MudAvatar>
<Rounded="true">
    <MudImage Src="../assets/images/faces/8.jpg"></MudImage>
</MudAvatar>
<Rounded="true">
    <MudImage Src="../assets/images/faces/2.jpg"></MudImage>
</MudAvatar>
<Rounded="true">
    <MudImage Src="../assets/images/faces/10.jpg"></MudImage>
</MudAvatar>
<Rounded="true">
    <MudImage Src="../assets/images/faces/4.jpg"></MudImage>
</MudAvatar>
<Rounded="true">
    <MudImage Src="../assets/images/faces/13.jpg"></MudImage>
</MudAvatar>
<Rounded="true">
    <MudImage Src="../assets/images/faces/13.jpg"></MudImage>
</MudAvatar>
<Rounded="true">
    <MudImage Src="../assets/images/faces/13.jpg"></MudImage>
</MudAvatar>
<Rounded="true">
    <MudImage Src="../assets/images/faces/13.jpg"></MudImage>
</MudAvatar>
<Rounded="true">
    <MudImage Src="../assets/images/faces/13.jpg"></MudImage>
</MudAvatar>
<Rounded="true">
    <MudImage Src="../assets/images/faces/13.jpg"></MudImage>
</MudAvatar>
<Rounded="true">
    <MudImage Src="../assets/images/faces/13.jpg"></MudImage>
</MudAvatar>
<Rounded="true">
    <MudImage Src="../assets/images/faces/13.jpg"></MudImage>
</MudAvatar>
</MudAvatarGroup>

@code {
    int max = 6;
    int spacing = 0;
}

rounded-lg Stacked Avatars

Group of avatars stacked together

+8


<MudAvatarGroup Max="6" Spacing="0" MaxColor="Color.Primary">
<MudAvatar>
    <MudImage Src="../assets/images/faces/2.jpg"></MudImage>
</MudAvatar>
<MudAvatar>
    <MudImage Src="../assets/images/faces/8.jpg"></MudImage>
</MudAvatar>
<MudAvatar>
    <MudImage Src="../assets/images/faces/2.jpg"></MudImage>
</MudAvatar>
<MudAvatar>
    <MudImage Src="../assets/images/faces/10.jpg"></MudImage>
</MudAvatar>
<MudAvatar>
    <MudImage Src="../assets/images/faces/4.jpg"></MudImage>
</MudAvatar>
<MudAvatar>
    <MudImage Src="../assets/images/faces/13.jpg"></MudImage>
</MudAvatar>
<MudAvatar>
    <MudImage Src="../assets/images/faces/13.jpg"></MudImage>
</MudAvatar>
<MudAvatar>
    <MudImage Src="../assets/images/faces/13.jpg"></MudImage>
</MudAvatar>
<MudAvatar>
    <MudImage Src="../assets/images/faces/13.jpg"></MudImage>
</MudAvatar>
<MudAvatar>
    <MudImage Src="../assets/images/faces/13.jpg"></MudImage>
</MudAvatar>
<MudAvatar>
    <MudImage Src="../assets/images/faces/13.jpg"></MudImage>
</MudAvatar>
<MudAvatar>
    <MudImage Src="../assets/images/faces/13.jpg"></MudImage>
</MudAvatar>
<MudAvatar>
    <MudImage Src="../assets/images/faces/13.jpg"></MudImage>
</MudAvatar>
<MudAvatar>
    <MudImage Src="../assets/images/faces/13.jpg"></MudImage>
</MudAvatar>
</MudAvatarGroup>
@code {
    int max = 6;
    int spacing = 0;
}