رنگ ها

از کلاس bg-* برای تغییر پس زمینه آواتار استفاده کنید.

پ آ د
                  
          
            <div >
            <div >
             <h5>Colors</h5>
             <p >برای تغییر رنگ پس زمینه از کلاس <code>bg-*</code> استفاده کنید.
             </p>
            </div>
            <div >
             <div >
             <span >
              <i ></i>
             </span>
             <span >
              <i ></i>
             </span>
             <span >
              <i ></i>
             </span>
             <span >
              <i ></i>
             </span>
             <span >
              پ
             </span>
             <span >
              آ د
             </span>
             </div>
            </div>
            </div>
           
         
              
حاشیه دار

برای افزودن حاشیه از کلاس text-outline-* استفاده کنید.

آ ر ت ا
                  
          
            <div >
            <div >
             <h5>Outline</h5>
             <p >برای افزودن حاشیه از کلاس <code>text-outline-*</code> استفاده کنید.</p>
            </div>
            <div >
             <div >
             <span >
              <i ></i>
             </span>
             <span >
              <i ></i>
             </span>
             <span >
              <i ></i>
             </span>
             <span >
              <i ></i>
             </span>
             <span >
              آ ر
             </span>
             <span >
              ت ا
             </span>
             </div>
            </div>
            </div>
           
         
              
تصاویر
آواتار
آواتار
آواتار
آواتار
آواتار
آواتار
  
<div >
<div >
  <h5>Images</h5>
 </div>
 <div >
 <div >
 <div >
  <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/1.png" alt="آواتار" >
 </div>
 <div >
  <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/2.png" alt="آواتار" >
 </div>
 <div >
  <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/3.png" alt="آواتار" >
 </div>
 <div >
  <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/4.png" alt="آواتار" >
 </div>
 <div >
  <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/5.png" alt="آواتار" >
 </div>
 <div >
  <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/6.png" alt="آواتار" >
 </div>
 </div>
</div>
</div>
   
 
سایز
                     
         <div >
         <div >
          <h5>Size</h5>
         </div>
         <div >
          <div >
          <div >
           <span >
           <i ></i>
           </span>
           <span >
           <i ></i>
           </span>
           <span >
           <i ></i>
           </span>
           <span >
           <i ></i>
           </span>
           <span >
           <i ></i>
           </span>
          </div>
          </div>
         </div>
         </div>
        
        
                
پس زمینه روشن

برای پس زمینه روشن از کلاس text-light-* استفاده کنید.

                  
<div >
 <div >
 <h5>Light background</h5>
 <p >برای پس زمینه روشن از کلاس <code>text-light-*</code> استفاده کنید.</p>
 </div>
 <div >
 <div >
  <span >
  <i ></i>
  </span>
  <span >
  <i ></i>
  </span>
  <span >
  <i ></i>
  </span>
  <span >
  <i ></i>
  </span>
  <span >
  <i ></i>
  </span>
  <span >
  <i ></i>
  </span>
 </div>
 </div>
</div>
         
              
شعاعی

مدیریت شعاع پخی آواتارها

  
  
<div >
 <div >
 <h5>Light background</h5>
 <p >برای پس زمینه روشن از کلاس <code>text-light-*</code> استفاده کنید.</p>
 </div>
 <div >
 <div >
  <span >
  <i ></i>
  </span>
  <span >
  <i ></i>
  </span>
  <span >
  <i ></i>
  </span>
  <span >
  <i ></i>
  </span>
  <span >
  <i ></i>
  </span>
  <span >
  <i ></i>
  </span>
 </div>
 </div>
</div>
 
شاخص ها و آیکن ها

مثال وضعیت و آیکن ها

آواتار آواتار 3 آواتار
  
 <div >
 <div >
    <h5>شاخص ها و آیکن</h5>
   <p >مثال شاخص ها و آیکن</p>
  </div>
    <div >
     <div >
     <span >
      <i ></i>
      <span
      ></span>
     </span>
     <span >
      <i ></i>
      <span
      ></span>
     </span>
     <span >
      <i ></i>
      <span
      ></span>
     </span>
     <span >
      <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/1.png" alt="آواتار" >
      <span
      ></span>
     </span>
     <span >
      <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/4.png" alt="آواتار" >
      <span
      >3</span>
     </span>
     <span >
      <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/6.png" alt="آواتار" >
      <span
      ><i
       ></i></span>
   </span>
  </div>
  </div>
  </div>
 
گروه بندی همراه با تولتیپ

گروه بندی کاربران همراه با تولتیپ

  • آواتار
  • آواتار
  • آواتار
  • آ
  • س د
  • ف ق ر
  • 2+
  • آواتار
  • آواتار
  • آواتار
  • 10+
  • آواتار
  • آواتار
  • آواتار
  • آواتار
  • 5+
                    
           
             <div >
              <div >
              <h5>گروه بندی همراه با تولتیپ</h5>
              <p >گروه بندی کاربران همراه با تولتیپ</p>
              </div>
              <div >
              <div >
               <ul >
              <li >
              <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/4.png" alt="آواتار" >
              </li>
              <li 
              data-bs-toggle="tooltip" data-bs-title="لادن">
              <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/5.png" alt="آواتار" >
              </li>
              <li 
              data-bs-toggle="tooltip" data-bs-title="مریم">
              <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/6.png" alt="آواتار" >
              </li>
               </ul>

               <ul >
              <li data-bs-toggle="tooltip"
              data-bs-title="آتنا">
              <i ></i>
              </li>
              <li data-bs-toggle="tooltip"
              data-bs-title="کاوه">
              <i ></i>
              </li>
              <li data-bs-toggle="tooltip"
              data-bs-title="رادمهر">
              <i ></i>
              </li>
               </ul>

               <ul >
              <li data-bs-toggle="tooltip"
              data-bs-title="الهام">
              آ
              </li>
              <li data-bs-toggle="tooltip"
              data-bs-title="هادی">
              س ی
              </li>
              <li data-bs-toggle="tooltip"
              data-bs-title="هادی">
              ر ف ق
              </li>
              <li data-bs-toggle="tooltip"
              data-bs-title="2 مورد">
              2+
              </li>
               </ul>

               <ul >
              <li 
              data-bs-toggle="tooltip" data-bs-title="سیما ترانه">
              <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/4.png" alt="آواتار" >
              </li>
              <li 
              data-bs-toggle="tooltip" data-bs-title="آوا">
              <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/5.png" alt="آواتار" >
              </li>
              <li 
              data-bs-toggle="tooltip" data-bs-title="میکائیل">
              <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/6.png" alt="آواتار" >
              </li>
              <li data-bs-toggle="tooltip"
              data-bs-title="10 مورد">
              10+
              </li>
               </ul>
               <ul >
              <li 
              data-bs-toggle="tooltip" data-bs-title="سیما ترانه">
              <span
               ></span>
              <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/4.png" alt="آواتار" >
              </li>
              <li 
              data-bs-toggle="tooltip" data-bs-title="سیما ترانه">
              <span
               ></span>
              <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/1.png" alt="آواتار" >
              </li>
              <li 
              data-bs-toggle="tooltip" data-bs-title="سیما ترانه">
              <span
               ></span>
              <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/2.png" alt="آواتار" >
              </li>
              <li 
              data-bs-toggle="tooltip" data-bs-title="سیما ترانه">
              <span
               ></span>
              <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/3.png" alt="آواتار" >
              </li>
              <li data-bs-toggle="tooltip"
              data-bs-title="5 مورد ">
              5+
              </li>
               </ul>
              </div>
              </div>
             </div>