Sigta UI · Kit

Avatar & Profile

Sizes — initials fallback

SF SF SF SF
Source 
<div class="flex flex-wrap items-center gap-4">
        <sigta:avatar name="Søren Frisk" size="xs" />
        <sigta:avatar name="Søren Frisk" size="sm" />
        <sigta:avatar name="Søren Frisk" />
        <sigta:avatar name="Søren Frisk" size="lg" />
    </div>

Shape & tone

MT MT MT MT P
Source 
<div class="flex flex-wrap items-center gap-4">
        <sigta:avatar name="Marginalia Team" />
        <sigta:avatar name="Marginalia Team" tone="line" />
        <sigta:avatar name="Marginalia Team" shape="square" />
        <sigta:avatar name="Marginalia Team" shape="square" tone="line" />
        <sigta:avatar name="Plumb" />
    </div>

With image

Søren Frisk Søren Frisk
Source 
<div class="flex flex-wrap items-center gap-4">
        <sigta:avatar
            src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><rect width='80' height='80' fill='gainsboro'/><circle cx='40' cy='31' r='14' fill='dimgray'/><path d='M12 76c4-17 16-25 28-25s24 8 28 25z' fill='dimgray'/></svg>"
            name="Søren Frisk" />
        <sigta:avatar
            src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><rect width='80' height='80' fill='gainsboro'/><circle cx='40' cy='31' r='14' fill='dimgray'/><path d='M12 76c4-17 16-25 28-25s24 8 28 25z' fill='dimgray'/></svg>"
            name="Søren Frisk" shape="square" size="lg" />
    </div>

Profile — name + meta

Søren Frisk Studio lead · Copenhagen
Ada Marsh Engineering · Halyard OS
Nina Vale Design · Marginalia
Source 
<div class="flex flex-col gap-5">
        <sigta:profile name="Søren Frisk" meta="Studio lead · Copenhagen" />
        <sigta:profile
            name="Ada Marsh"
            meta="Engineering · Halyard OS"
            src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><rect width='80' height='80' fill='gainsboro'/><circle cx='40' cy='31' r='14' fill='dimgray'/><path d='M12 76c4-17 16-25 28-25s24 8 28 25z' fill='dimgray'/></svg>" />
        <div class="flex justify-end">
            <sigta:profile name="Nina Vale" meta="Design · Marginalia" reverse />
        </div>
    </div>