Activity Stream
Report-Fix / Update

Add 3 files to Tasks

Monday , 4:24 PM
Project Status

Marked Design as Completed

Monday , 3:00 PM
UI
Larkon Application UI v2.0.0 Latest

Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.

Monday , 2:10 PM
avatar-5
Alex Smith Attached Photos
Monday 1:00 PM
avatar-5
Rebecca J. added a new team member

Added a new member to Front Dashboard

Monday 10:00 AM
Achievements

Earned a " Best Product Award"

Monday 9:30 AM
View All
Theme Settings
Color Scheme
Topbar Color
Menu Color
Sidebar Size
Basic Example #

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

html
                                            
                                                <img src="assets/images/users/avatar-2.jpg" alt="image" class="img-fluid avatar-xs rounded">
                                                <img src="assets/images/users/avatar-3.jpg" alt="image" class="img-fluid avatar-sm rounded mt-2">
                                                <img src="assets/images/users/avatar-4.jpg" alt="image" class="img-fluid avatar-md rounded" />
                                                <img src="assets/images/users/avatar-5.jpg" alt="image" class="img-fluid avatar-lg rounded" />
                                                <img src="assets/images/users/avatar-6.jpg" alt="image" class="img-fluid avatar-xl rounded" />
                                            
                                        
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

html
                                            
                                                <img src="assets/images/users/avatar-7.jpg" alt="image" class="img-fluid avatar-md rounded-circle" />
                                                <img src="assets/images/users/avatar-8.jpg" alt="image" class="img-fluid avatar-lg rounded-circle" />
                                                <img src="assets/images/users/avatar-9.jpg" alt="image" class="img-fluid avatar-xl rounded-circle" />
                                            
                                        
Images Shapes#

Avatars with different sizes and shapes.

image

.rounded

image

.rounded

image

.rounded-circle

image

.img-thumbnail

image

.rounded-circle .img-thumbnail

html
                                            
                                                <img src="assets/images/small/img-2.jpg" alt="image" class="img-fluid rounded" width="200" />
                                                <img src="assets/images/users/avatar-5.jpg" alt="image" class="img-fluid rounded" width="120" />
                                                <img src="assets/images/users/avatar-7.jpg" alt="image" class="img-fluid rounded-circle" width="120" />
                                                <img src="assets/images/small/img-3.jpg" alt="image" class="img-fluid img-thumbnail" width="200" />
                                                <img src="assets/images/users/avatar-8.jpg" alt="image" class="img-fluid rounded-circle img-thumbnail" width="120" />
                                            
                                        
© Larkon. Crafted by Techzaa