Corex · Elixir Phoenix Framework UI Library

اللون

A

B

C

D

E

    <.avatar src="" class="avatar avatar--accent">
  <:fallback>A</:fallback>
</.avatar>
<.avatar src="" class="avatar avatar--brand">
  <:fallback>B</:fallback>
</.avatar>

الحجم

SM

MD

LG

XL

    <.avatar src="https://corex-ui.com/images/avatar.png" class="avatar avatar--sm">
  <:fallback>SM</:fallback>
</.avatar>
<.avatar src="https://corex-ui.com/images/avatar.png" class="avatar avatar--md">
  <:fallback>MD</:fallback>
</.avatar>
<.avatar src="https://corex-ui.com/images/avatar.png" class="avatar avatar--lg">
  <:fallback>LG</:fallback>
</.avatar>
<.avatar src="https://corex-ui.com/images/avatar.png" class="avatar avatar--xl">
  <:fallback>XL</:fallback>
</.avatar>

Rounded

MD

0

SM

MD

LG

XL

●

    <.avatar src="https://corex-ui.com/images/avatar.png" alt="" class="avatar">
  <:fallback>MD</:fallback>
</.avatar>
<.avatar src="https://corex-ui.com/images/avatar.png" alt="" class="avatar avatar--rounded-none">
  <:fallback>0</:fallback>
</.avatar>
<.avatar src="https://corex-ui.com/images/avatar.png" alt="" class="avatar avatar--rounded-sm">
  <:fallback>SM</:fallback>
</.avatar>
<.avatar src="https://corex-ui.com/images/avatar.png" alt="" class="avatar avatar--rounded-md">
  <:fallback>MD</:fallback>
</.avatar>
<.avatar src="https://corex-ui.com/images/avatar.png" alt="" class="avatar avatar--rounded-lg">
  <:fallback>LG</:fallback>
</.avatar>
<.avatar src="https://corex-ui.com/images/avatar.png" alt="" class="avatar avatar--rounded-xl">
  <:fallback>XL</:fallback>
</.avatar>
<.avatar src="https://corex-ui.com/images/avatar.png" alt="" class="avatar avatar--rounded-full">
  <:fallback>●</:fallback>
</.avatar>

الصورة الرمزية · النمط البصري

معدّلات للون والحجم على الاحتياطي والإطار.

اللون

الحجم

Rounded