Tesserae

Avatar

Description

A component that represents a user

Avatars are used to represent users, teams, or entities in the system. They can display images, initials, and presence indicators.

The Persona component builds upon Avatar by adding textual information like name, role, and status, making it ideal for profile cards or contact lists.

Samples

Avatar Sizes and Presence

Avatars support various sizes from XSmall to XLarge and optional presence states.

avatar-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var avatars = HStack().Children(
                Avatar(initials: "JD", image: "https://cataas.com/cat").Size(AvatarSize.XSmall),
                Avatar(initials: "JD", image: "https://cataas.com/cat").Size(AvatarSize.Small).Presence(AvatarPresence.Online),
                Avatar(initials: "JD", image: "https://cataas.com/cat").Size(AvatarSize.Medium).Presence(AvatarPresence.Away),
                Avatar(initials: "JD", image: "https://cataas.com/cat").Size(AvatarSize.Large).Presence(AvatarPresence.Busy),
                Avatar(initials: "JD", image: "https://cataas.com/cat").Size(AvatarSize.XLarge).Presence(AvatarPresence.Offline));

            document.body.style.overflow = "hidden";
            MountCenteredToBody(avatars);
        }
    }
}

Initials Fallback

When no image is provided, initials are displayed with a generated background color derived from a deterministic hash of the initials.

avatar-initials-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var avatars = HStack().Children(
                Avatar(initials: "JD").Size(AvatarSize.Small).Presence(AvatarPresence.Online),
                Avatar(initials: "AS").Size(AvatarSize.Medium).Presence(AvatarPresence.Away),
                Avatar(initials: "KL").Size(AvatarSize.Large).Presence(AvatarPresence.Busy),
                Avatar(initials: "MW").Size(AvatarSize.XLarge).Presence(AvatarPresence.Offline));

            document.body.style.overflow = "hidden";
            MountCenteredToBody(avatars);
        }
    }
}

Persona Component

Personas combine an avatar with descriptive text.

avatar-persona-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var personas = VStack().Children(
                Persona("Jordan Diaz", "Product Designer", "Available for collaboration", Avatar(initials: "JD").Presence(AvatarPresence.Online)),
                Persona("Alex Smith", "Software Engineer", "Focusing...", Avatar(initials: "AS").Presence(AvatarPresence.Busy)),
                Persona("Kelly Lee", "Project Manager", "Away", Avatar(initials: "KL").Presence(AvatarPresence.Away)));

            document.body.style.overflow = "hidden";
            MountCenteredToBody(personas);
        }
    }
}