Primer CSS Avatars 基本示例

Primer CSS是一个免费的开源 CSS 框架，它建立在创建基本样式元素（如间距、排版和颜色）基础的系统之上。它具有高度可重用性和灵活性。它是使用 GitHub 的设计系统创建的。

头像是在网页上表示用户身份或不同徽标的重要工具。我们可以使用不同类型的基本化身。

• 基本：这用于定义一个简单的基本头像。您可以设置头像的宽度和高度。
• 头像尺寸：这用于在头像类别中为 1 到 8 号的头像提供不同的尺寸。
• Avatar Stack：用于将 2 个或更多头像堆叠在一起。
• 父子头像：这使您可以将子头像添加到父头像。

班级：

• avatar：将头像类添加到相应的元素以实现基本示例。

句法：

    UI element to be shown.

示例 1：本示例使用avatar类演示了不同类型的 Primer CSS Avatars Basic Example。

HTML

    
    

  

    

        
 GeeksforGeeks 
        
Primer CSS Avatars Basic Examples


    
  
    

        

            
Avatar Basic


            
        
        

            
Avatar Sizes


            
            
            
            
            
            
            
         
        

            
Parent Child Avatars


            

                
                
            
        
    

输出：

头像基本示例

示例 2：此示例使用AvatarStack类演示 Primer CSS Avatars Stack。

HTML

    
    

  

    

        
 GeeksforGeeks 
        
Primer CSS Avatars Stack


    
    

        

            

               
               
            
          
    

输出：

头像堆栈

参考链接： https://primer.style/css/components/avatars#basic-example