Avatar
The avatar displays a reprensation of a user account in the platform. It adapts to the input, and displays the most fuitful content. It will sort in descending order between the folowing parameters.
- User image
- User icon
- User initials (calculated form name)
I'ts benificial for the user if you always provide the full name of the user, since it will be providing screen readers with vital information.
Image
<!-- avatar.blade.php -->
<div class="c-avatar c-avatar--size-md" data-uid="678b0b730efab">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="Cookie Monster" data-uid="678b0b730efe0">
<img
loading="lazy"
class="c-image__image"
src="https://picsum.photos/id/64/70/70"
alt="Cookie Monster"
/> </figure>
</div>@avatar(
[
'image' => "https://picsum.photos/id/64/70/70",
'name' => "Cookie Monster"
]
)
@endavatarName
<!-- avatar.blade.php -->
<div class="c-avatar c-avatar--size-md" data-uid="678b0b730f085">
<svg class="c-avatar__initials" aria-label="Cookie Monster" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text font-size="380" y="50%" x="50%" fill="#fff" dominant-baseline="middle" text-anchor="middle" alignment-baseline="central">CM</text>
</svg>
</div>@avatar(
[
'name' => "Cookie Monster"
]
)
@endavatarIcon
<!-- avatar.blade.php -->
<div class="c-avatar c-avatar--size-md" data-uid="678b0b730f0e4">
<span class="c-avatar__icon" aria-label="Cookie Monster">
<!-- icon.blade.php -->
<span class="c-icon c-icon--size-xl c-icon--favorite c-icon--material c-icon--material-favorite material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-inherit" material-symbol="favorite" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="678b0b730f119">
</span>
</span>
</div>@avatar(
[
'name' => "Cookie Monster",
'icon' => [
'name' => 'favorite',
'size' => 'xl'
]
]
)
@endavatarBlade component parameters
| Key | Default value | Type | Available values | Description |
| image | false | boolean | - | A url to a profile image or an ImageInterface. |
| icon | [] | array | - | Attributes for @icon component (separate reference). |
| name | string | - | Persons full name | |
| size | md | string | - | sm,md,lg,full |
| id | string | - | The DOM id of the component. | |
| classList | [] | array | - | Array containing wrapping classes array |
| attributeList | [] | array | - | Array containing keys and values rendered as attributes |
| containerAware | false | boolean | true/false | Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component. |