Avatar

Components

Avatar / No Label / Large
Avatar / No Label / Default
Avatar 1
Avatar / No Label / Small
Avatar 1
Avatar / Label / Horizontal / Large
Konrad Chmist
Avatar / Label / Horizontal / Default
Avatar 1
Jackie Forman
Avatar / Label / Horizontal / Small
Avatar 1
Jackie Forman
Avatar / Label / Vertical / Large
Jackie Forman
CEO at Company
Avatar / Label / Vertical / Default
Avatar 1
Jackie Forman
CEO at Company
Avatar / Label / Vertical / Small
Avatar 1
Jackie Forman
CEO at Company
Avatar / Group / Large
Avatar 1Avatar 1Avatar 1Avatar 1
Avatar / Group / Default
Avatar 1Avatar 1Avatar 1Avatar 1
Avatar / Group / Small
Avatar 1Avatar 1Avatar 1Avatar 1

Best Practices

Use components to build interfaces. Search the component's name in the Component panel (Shift + A) or use quick search (Ctrl + E). Once you added a Component to your page unlink it to make changes. Right-click on the symbol’s label and choose unlink from symbol. This is the rule. We use overrides only as an exception for simple components that you'd rather want to re-style on the specific page within Style Guide (buttons, toggles etc. - mostly atoms).

Component Description

Avatars are used to show a thumbnail representation of an individual or company in the interface.

arrow_upward