OOOOPS. Your browser seems to be too old for this. Please update your browser.
Teutonic CSS
Use it

Generic avatars

When you don’t have a Gravatar or uploaded icon at hand, use can use pseudo icon. Based on first letter (or number) of your users name. This component example combines multiple Teutonic methods.

Buchstabier-Alphabet

A
Anton
B
Berta
C
Cäsar
D
Dora
E
Emil
F
Friedrich
G
Gustav
H
Heinrich
I
Ida
J
Joseph
K
Kaufmann
L
Ludwig
M
Martha
N
Nordpol
O
Otto
P
Paula
Q
Quelle
R
Richard
S
Samuel
T
Theodor
U
Ulrich
V
Viktor
W
Wilhelm
X
Xanthippe
Y
Ypsilon
Z
Zacharias
0
Zero
1
One
2
Two
3
Three
4
Four
5
Five
6
Six
7
Seven
8
Eight
9
Nine
<h3 class="bo-b_xs pa-b_xs">Buchstabier-Alphabet</h3>
<div class="columns gap-no cols-4 cols-2-t collapse-p">
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-a flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">A</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Anton</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-b flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">B</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Berta</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-c flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">C</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Cäsar</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-d flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">D</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Dora</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-e flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">E</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Emil</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-f flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">F</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Friedrich</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-g flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">G</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Gustav</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-h flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">H</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Heinrich</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-i flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">I</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Ida</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-j flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">J</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Joseph</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-k flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">K</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Kaufmann</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-l flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">L</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Ludwig</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-m flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">M</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Martha</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-n flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">N</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Nordpol</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-o flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">O</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Otto</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-p flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">P</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Paula</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-q flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">Q</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Quelle</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-r flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">R</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Richard</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-s flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">S</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Samuel</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-t flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">T</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Theodor</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-u flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">U</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Ulrich</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-v flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">V</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Viktor</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-w flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">W</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Wilhelm</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-x flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">X</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Xanthippe</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-y flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">Y</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Ypsilon</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-z flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">Z</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Zacharias</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-0 flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">0</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Zero</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-1 flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">1</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">One</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-2 flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">2</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Two</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-3 flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">3</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Three</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-4 flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">4</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Four</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-5 flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">5</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Five</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-6 flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">6</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Six</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-7 flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">7</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Seven</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-8 flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">8</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Eight</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-9 flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">9</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Nine</div>
    </div>
  </div>
</div>