1. Hyper
  2. Base UI
  3. Avatars

Avatars

Sizing - Images

Create and group avatars of different sizes and shapes with the css classes. Using Bootstrap's naming convention, you can control size of avatar including standard avatar, or scale it up to different sizes.

image

.avatar-xs

image

.avatar-sm

image

.avatar-md

image

.avatar-lg

image

.avatar-xl 

                                                    
                                                            <!-- Avatar Extra Small -->
                                                            <img src="assets/images/users/avatar-2.jpg" alt="image" class="img-fluid avatar-xs">
                                                            
                                                            <!-- Avatar Small -->
                                                            <img src="assets/images/users/avatar-2.jpg" alt="image" class="img-fluid avatar-sm">
                                                            
                                                            <!-- Avatar Medium -->
                                                            <img src="assets/images/users/avatar-2.jpg" alt="image" class="img-fluid avatar-md">
                                                            
                                                            <!-- Avatar Large -->
                                                            <img src="assets/images/users/avatar-2.jpg" alt="image" class="img-fluid avatar-lg">
                                                            
                                                            <!-- Avatar Extra Large -->
                                                            <img src="assets/images/users/avatar-2.jpg" alt="image" class="img-fluid avatar-xl">

Rounded Circle

Using an additional class .rounded-circle in <img> element creates the rounded avatar.

image

.avatar-md .rounded-circle

image

.avatar-lg .rounded-circle

image

.avatar-xl .rounded-circle 

                                                    
                                                        <!-- Avatar Medium -->
                                                        <img src="assets/images/users/avatar-2.jpg" alt="image" class="img-fluid avatar-md rounded-circle">
                                                        
                                                        <!-- Avatar Large -->
                                                        <img src="assets/images/users/avatar-2.jpg" alt="image" class="img-fluid avatar-lg rounded-circle">
                                                        
                                                        <!-- Avatar Extra Large -->
                                                        <img src="assets/images/users/avatar-2.jpg" alt="image" class="img-fluid avatar-xl rounded-circle">

Sizing - Background Color

Using utilities classes of background e.g. bg-* allows you to have any background color as well.

xs

Using .avatar-xs

sm

Using .avatar-sm

MD

Using .avatar-md

LG

Using .avatar-lg

XL

Using .avatar-xl 

                                                    
                                                        <!-- Avatar Extra Small -->
                                                        <div class="avatar-xs">
                                                            <span class="avatar-title bg-success rounded">
                                                                xs
                                                            </span>
                                                        </div>
                                                        
                                                        <!-- Avatar Small -->
                                                        <div class="avatar-sm">
                                                            <span class="avatar-title bg-success rounded">
                                                                sm
                                                            </span>
                                                        </div>
                                                        
                                                        <!-- Avatar Medium -->
                                                        <div class="avatar-md">
                                                            <span class="avatar-title bg-success rounded">
                                                                md
                                                            </span>
                                                        </div>
                                                        
                                                        <!-- Avatar Large -->
                                                        <div class="avatar-lg">
                                                            <span class="avatar-title bg-success rounded">
                                                                lg
                                                            </span>
                                                        </div>
                                                        
                                                        <!-- Avatar Extra Small -->
                                                        <div class="avatar-xl">
                                                            <span class="avatar-title bg-success rounded">
                                                                xl
                                                            </span>
                                                        </div>

Rounded Circle Background

Using an additional class .rounded-circle in <img> element creates the rounded avatar.

MD

Using .avatar-md .rounded-circle

LG

Using .avatar-lg .rounded-circle

XL

Using .avatar-xl .rounded-circle 

                                                    
                                                        <!-- Avatar Medium -->
                                                        <div class="avatar-md">
                                                            <span class="avatar-title bg-success rounded-circle">
                                                                md
                                                            </span>
                                                        </div>
                                                        
                                                        <!-- Avatar Large -->
                                                        <div class="avatar-lg">
                                                            <span class="avatar-title bg-success rounded-circle">
                                                                lg
                                                            </span>
                                                        </div>
                                                        
                                                        <!-- Avatar Extra Small -->
                                                        <div class="avatar-xl">
                                                            <span class="avatar-title bg-success rounded-circle">
                                                                xl
                                                            </span>
                                                        </div>

Images shapes

Avatars with different sizes and shapes.

image

.rounded

image

.rounded

image

.rounded-circle

image

.img-thumbnail

image

.rounded-circle .img-thumbnail 

                                                    
                                                        <!-- Rounded -->
                                                        <img src="assets/images/small/small-2.jpg" alt="image" class="img-fluid rounded" width="200"/>
                                                        
                                                        <!-- Rounded Circle-->
                                                        <img src="assets/images/user/avatar-1.jpg" alt="image" class="img-fluid rounded-circle" width="120"/>
                                                        
                                                        <!-- Thumbnail-->
                                                        <img src="assets/images/small/small-3.jpg" alt="image" class="img-fluid img-thumbnail" width="200"/>
                                                        
                                                        <!-- Thumbnail Circle-->
                                                        <img src="assets/images/user/avatar-2.jpg" alt="image" class="img-fluid img-thumbnail rounded-circle" width="120"/>
Settings
Color Scheme
Width
Purchase Now