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="673ed1757a18a">
                    <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

<!-- avatar.blade.php -->
    <div class="c-avatar c-avatar--size-md" data-uid="673ed1757a3ea">
        
        
                    <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="673ed1757a5fe">
        
                    <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="673ed1757a633">
                    </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