Avatars

Use Avatars for...

Extra Small Avatars

Use Extra Small Avatars for...

WFWFWFWFWFWFWFWFWF
import { AvatarColor, AvatarSize } from "@hedia/windfall/css/avatars";
import { avatar } from "@hedia/windfall/html/avatars";

avatar({ color: AvatarColor.Gray, size: AvatarSize.ExtraSmall }, "WF"),
avatar({ color: AvatarColor.Red, size: AvatarSize.ExtraSmall }, "WF"),
avatar({ color: AvatarColor.Yellow, size: AvatarSize.ExtraSmall }, "WF"),
avatar({ color: AvatarColor.Green, size: AvatarSize.ExtraSmall }, "WF"),
avatar({ color: AvatarColor.Teal, size: AvatarSize.ExtraSmall }, "WF"),
avatar({ color: AvatarColor.Blue, size: AvatarSize.ExtraSmall }, "WF"),
avatar({ color: AvatarColor.Indigo, size: AvatarSize.ExtraSmall }, "WF"),
avatar({ color: AvatarColor.Purple, size: AvatarSize.ExtraSmall }, "WF"),
avatar({ color: AvatarColor.Pink, size: AvatarSize.ExtraSmall }, "WF"),

Small Avatars

Use Small Avatars for...

WFWFWFWFWFWFWFWFWF
import { AvatarColor, AvatarSize } from "@hedia/windfall/css/avatars";
import { avatar } from "@hedia/windfall/html/avatars";

avatar({ color: AvatarColor.Gray, size: AvatarSize.Small }, "WF"),
avatar({ color: AvatarColor.Red, size: AvatarSize.Small }, "WF"),
avatar({ color: AvatarColor.Yellow, size: AvatarSize.Small }, "WF"),
avatar({ color: AvatarColor.Green, size: AvatarSize.Small }, "WF"),
avatar({ color: AvatarColor.Teal, size: AvatarSize.Small }, "WF"),
avatar({ color: AvatarColor.Blue, size: AvatarSize.Small }, "WF"),
avatar({ color: AvatarColor.Indigo, size: AvatarSize.Small }, "WF"),
avatar({ color: AvatarColor.Purple, size: AvatarSize.Small }, "WF"),
avatar({ color: AvatarColor.Pink, size: AvatarSize.Small }, "WF"),

Medium Avatars

Use Medium Avatars for...

WFWFWFWFWFWFWFWFWF
import { AvatarColor, AvatarSize } from "@hedia/windfall/css/avatars";
import { avatar } from "@hedia/windfall/html/avatars";

avatar({ color: AvatarColor.Gray, size: AvatarSize.Medium }, "WF"),
avatar({ color: AvatarColor.Red, size: AvatarSize.Medium }, "WF"),
avatar({ color: AvatarColor.Yellow, size: AvatarSize.Medium }, "WF"),
avatar({ color: AvatarColor.Green, size: AvatarSize.Medium }, "WF"),
avatar({ color: AvatarColor.Teal, size: AvatarSize.Medium }, "WF"),
avatar({ color: AvatarColor.Blue, size: AvatarSize.Medium }, "WF"),
avatar({ color: AvatarColor.Indigo, size: AvatarSize.Medium }, "WF"),
avatar({ color: AvatarColor.Purple, size: AvatarSize.Medium }, "WF"),
avatar({ color: AvatarColor.Pink, size: AvatarSize.Medium }, "WF"),

Large Avatars

Use Large Avatars for...

WFWFWFWFWFWFWFWFWF
import { AvatarColor, AvatarSize } from "@hedia/windfall/css/avatars";
import { avatar } from "@hedia/windfall/html/avatars";

avatar({ color: AvatarColor.Gray, size: AvatarSize.Large }, "WF"),
avatar({ color: AvatarColor.Red, size: AvatarSize.Large }, "WF"),
avatar({ color: AvatarColor.Yellow, size: AvatarSize.Large }, "WF"),
avatar({ color: AvatarColor.Green, size: AvatarSize.Large }, "WF"),
avatar({ color: AvatarColor.Teal, size: AvatarSize.Large }, "WF"),
avatar({ color: AvatarColor.Blue, size: AvatarSize.Large }, "WF"),
avatar({ color: AvatarColor.Indigo, size: AvatarSize.Large }, "WF"),
avatar({ color: AvatarColor.Purple, size: AvatarSize.Large }, "WF"),
avatar({ color: AvatarColor.Pink, size: AvatarSize.Large }, "WF")

Extra Large Avatars

Use Extra Large Avatars for...

WFWFWFWFWFWFWFWFWF
import { AvatarColor, AvatarSize } from "@hedia/windfall/css/avatars";
import { avatar } from "@hedia/windfall/html/avatars";

avatar({ color: AvatarColor.Gray, size: AvatarSize.ExtraLarge }, "WF"),
avatar({ color: AvatarColor.Red, size: AvatarSize.ExtraLarge }, "WF"),
avatar({ color: AvatarColor.Yellow, size: AvatarSize.ExtraLarge }, "WF"),
avatar({ color: AvatarColor.Green, size: AvatarSize.ExtraLarge }, "WF"),
avatar({ color: AvatarColor.Teal, size: AvatarSize.ExtraLarge }, "WF"),
avatar({ color: AvatarColor.Blue, size: AvatarSize.ExtraLarge }, "WF"),
avatar({ color: AvatarColor.Indigo, size: AvatarSize.ExtraLarge }, "WF"),
avatar({ color: AvatarColor.Purple, size: AvatarSize.ExtraLarge }, "WF"),
avatar({ color: AvatarColor.Pink, size: AvatarSize.ExtraLarge }, "WF")

Avatars with Icons

Use Avatars with Icons for...

import { userBoldIcon } from "@hedia/iconly/bold";
import { AvatarColor, AvatarSize } from "@hedia/windfall/css/avatars";
import { avatar } from "@hedia/windfall/html/avatars";

avatar({ color: AvatarColor.Gray, size: AvatarSize.Medium }, userBoldIcon()),
avatar({ color: AvatarColor.Red, size: AvatarSize.Medium }, userBoldIcon()),
avatar({ color: AvatarColor.Yellow, size: AvatarSize.Medium }, userBoldIcon()),
avatar({ color: AvatarColor.Green, size: AvatarSize.Medium }, userBoldIcon()),
avatar({ color: AvatarColor.Teal, size: AvatarSize.Medium }, userBoldIcon()),
avatar({ color: AvatarColor.Blue, size: AvatarSize.Medium }, userBoldIcon()),
avatar({ color: AvatarColor.Indigo, size: AvatarSize.Medium }, userBoldIcon()),
avatar({ color: AvatarColor.Purple, size: AvatarSize.Medium }, userBoldIcon()),
avatar({ color: AvatarColor.Pink, size: AvatarSize.Medium }, userBoldIcon()),