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

Cookie Monster 
<!-- avatar.blade.php -->
    <div class="c-avatar c-avatar--size-md" data-uid="662305fae4e6b">
                    <img src="https://picsum.photos/id/64/70/70" class="c-avatar__image" alt="Cookie Monster" aria-label="Cookie Monster"/>
        
        
            </div>
@avatar(
    [
        'image' => "https://picsum.photos/id/64/70/70",
        'name' => "Cookie Monster"
    ]
)
@endavatar

Name

CM 
<!-- avatar.blade.php -->
    <div class="c-avatar c-avatar--size-md" data-uid="662305fae4fac">
        
        
                    <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"
    ]
)
@endavatar

Icon 

<!-- avatar.blade.php -->
    <div class="c-avatar c-avatar--size-md" data-uid="662305fae50e3">
        
                    <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-outlined material-symbols-outlined--filled c-icon--size-inherit" material-symbol="favorite" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="662305fae514b">
                favorite
    </span>
            </span>
        
            </div>
@avatar(
    [
        'name' => "Cookie Monster",
        'icon' => [
            'name' => 'favorite',
            'size' => 'xl'
        ]
    ]
)
@endavatar

Blade component parameters

Key Default value Type Available values Description
image string - A url to a profile image.
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.
Settings location: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Avatar/avatar.json