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
Heading #

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Alerts are available for any length of text, as well as an optional dismiss button.

h1.Example heading New

h2.Example heading New

h3.Example heading New

h4.Example heading New

h5.Example heading New
h6.Example heading New
html
                                                
                                                    <h1>h1.Example heading <span class="badge bg-primary">New</span></h1>
                                                    <h2>h2.Example heading <span class="badge bg-secondary">New</span></h2>
                                                    <h3>h3.Example heading <span class="badge bg-success">New</span></h3>
                                                    <h4>h4.Example heading <span class="badge bg-info">New</span></h4>
                                                    <h5>h5.Example heading <span class="badge bg-warning">New</span></h5>
                                                    <h6>h6.Example heading <span class="badge bg-danger">New</span></h6>
                                                
                                            
Default & Pill Badges #

Use our background utility classes to quickly change the appearance of a badge. And use the .rounded-pill class to make badges more rounded.

Primary Secondary Success Info Warning Danger Dark Purple Pink Orange
Primary Secondary Success Info Warning Danger Dark Purple Pink Orange
html
                                                
                                                    <!-- Default Badges -->
                                                    <span class="badge bg-primary me-1">Primary</span>
                                                    <span class="badge bg-secondary me-1">Secondary</span>
                                                    <span class="badge bg-success me-1">Success</span>
                                                    <span class="badge bg-info me-1">Info</span>
                                                    <span class="badge bg-warning me-1">Warning</span>
                                                    <span class="badge bg-danger me-1">Danger</span>
                                                    <span class="badge bg-dark me-1">Dark</span>
                                                    <span class="badge bg-purple me-1">Purple</span>
                                                    <span class="badge bg-pink me-1">Pink</span>
                                                    <span class="badge bg-orange me-1">Orange</span>
                                                    <!-- Pill Badges -->
                                                    <span class="badge bg-primary rounded-pill me-1">Primary</span>
                                                    <span class="badge bg-secondary rounded-pill me-1">Secondary</span>
                                                    <span class="badge bg-success rounded-pill me-1">Success</span>
                                                    <span class="badge bg-info rounded-pill me-1">Info</span>
                                                    <span class="badge bg-warning rounded-pill me-1">Warning</span>
                                                    <span class="badge bg-danger rounded-pill me-1">Danger</span>
                                                    <span class="badge bg-dark rounded-pill me-1">Dark</span>
                                                    <span class="badge bg-purple rounded-pill me-1">Purple</span>
                                                    <span class="badge bg-pink rounded-pill me-1">Pink</span>
                                                    <span class="badge bg-orange rounded-pill me-1">Orange</span>
                                                
                                            
Outline & Outline Pill Badges #

Using the .badge-outline-** to quickly create a bordered badges.

Primary Secondary Success Info Warning Danger Dark Purple Pink Orange
Primary Secondary Success Info Warning Danger Dark Purple Pink Orange
html
                                                
                                                    <!-- Outline Badges -->
                                                    <span class="badge badge-outline-primary me-1">Primary</span>
                                                    <span class="badge badge-outline-secondary me-1">Secondary</span>
                                                    <span class="badge badge-outline-success me-1">Success</span>
                                                    <span class="badge badge-outline-info me-1">Info</span>
                                                    <span class="badge badge-outline-warning me-1">Warning</span>
                                                    <span class="badge badge-outline-danger me-1">Danger</span>
                                                    <span class="badge badge-outline-dark me-1">Dark</span>
                                                    <span class="badge badge-outline-purple me-1">Purple</span>
                                                    <span class="badge badge-outline-pink me-1">Pink</span>
                                                    <span class="badge badge-outline-orange me-1">Orange</span>
                                                    <!-- Outline Pill Badges -->
                                                    <span class="badge badge-outline-primary rounded-pill me-1">Primary</span>
                                                    <span class="badge badge-outline-secondary rounded-pill me-1">Secondary</span>
                                                    <span class="badge badge-outline-success rounded-pill me-1">Success</span>
                                                    <span class="badge badge-outline-info rounded-pill me-1">Info</span>
                                                    <span class="badge badge-outline-warning rounded-pill me-1">Warning</span>
                                                    <span class="badge badge-outline-danger rounded-pill me-1">Danger</span>
                                                    <span class="badge badge-outline-dark rounded-pill me-1">Dark</span>
                                                    <span class="badge badge-outline-purple rounded-pill me-1">Purple</span>
                                                    <span class="badge badge-outline-pink rounded-pill me-1">Pink</span>
                                                    <span class="badge badge-outline-orange rounded-pill me-1">Orange</span>
                                                
                                            
Soft & Soft Pill Badges #

Using the .badge-soft-** modifier class, you can have more soften variation.

Primary Secondary Success Info Warning Danger Dark Purple Pink Orange
Primary Secondary Success Info Warning Danger Dark Purple Pink Orange
html
                                                
                                                    <!-- Soft Badges -->
                                                    <span class="badge badge-soft-primary me-1">Primary</span>
                                                    <span class="badge badge-soft-secondary me-1">Secondary</span>
                                                    <span class="badge badge-soft-success me-1">Success</span>
                                                    <span class="badge badge-soft-info me-1">Info</span>
                                                    <span class="badge badge-soft-warning me-1">Warning</span>
                                                    <span class="badge badge-soft-danger me-1">Danger</span>
                                                    <span class="badge badge-soft-dark me-1">Dark</span>
                                                    <span class="badge badge-soft-purple me-1">Purple</span>
                                                    <span class="badge badge-soft-pink me-1">Pink</span>
                                                    <span class="badge badge-soft-orange me-1">Orange</span>
                                                    <!-- Soft Pill Badges -->
                                                    <span class="badge badge-soft-primary rounded-pill me-1">Primary</span>
                                                    <span class="badge badge-soft-secondary rounded-pill me-1">Secondary</span>
                                                    <span class="badge badge-soft-success rounded-pill me-1">Success</span>
                                                    <span class="badge badge-soft-info rounded-pill me-1">Info</span>
                                                    <span class="badge badge-soft-warning rounded-pill me-1">Warning</span>
                                                    <span class="badge badge-soft-danger rounded-pill me-1">Danger</span>
                                                    <span class="badge badge-soft-dark rounded-pill me-1">Dark</span>
                                                    <span class="badge badge-soft-purple rounded-pill me-1">Purple</span>
                                                    <span class="badge badge-soft-pink rounded-pill me-1">Pink</span>
                                                    <span class="badge badge-soft-orange rounded-pill me-1">Orange</span>
                                                
                                            
Buttons & Position #

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

Notifications 90+
html
                                                
                                                    <!-- Buttons -->
                                                    <button type="button" class="btn btn-primary me-1">
                                                        Notifications <span class="badge bg-danger ms-1">4</span>
                                                    </button>
                                                    <button type="button" class="btn btn-outline-primary me-1">
                                                        Notifications <span class="badge bg-primary ms-1">new</span>
                                                    </button>
                                                    <button type="button" class="btn btn-soft-primary">
                                                        Notifications <span class="badge bg-primary ms-1">11+</span>
                                                    </button>
                                                    <a href="javascript:void(0);" type="button" class="btn">
                                                        Notifications <span class="badge bg-primary ms-1">90+</span>
                                                    </a>

                                                    <!-- Position -->
                                                    <button type="button" class="btn btn-sm btn-primary position-relative me-3">
                                                        Inbox
                                                        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger border border-light">99+</span>
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-primary position-relative">
                                                        Profile
                                                        <span class="position-absolute top-0 start-100 translate-middle p-1 bg-danger border border-light rounded-circle"></span>
                                                    </button>
                                                
                                            
© Larkon. Crafted by Techzaa