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

A progress bar can be used to show a user how far along he/she is in a process.

Placeholder
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
html
                                                
                                                    <div class="card">
                                                        <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false">
                                                            <title>Placeholder</title>
                                                            <rect width="100%" height="100%" fill="#20c997"></rect>
                                                        </svg>

                                                        <div class="card-body">
                                                            <h5 class="card-title">Card title</h5>
                                                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                                            <a href="#" class="btn btn-primary">Go somewhere</a>
                                                        </div>
                                                    </div>

                                                    <div class="card" aria-hidden="true">
                                                        <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false">
                                                            <title>Placeholder</title>
                                                            <rect width="100%" height="100%" fill="#868e96"></rect>
                                                        </svg>

                                                        <div class="card-body">
                                                            <div class="h5 card-title placeholder-glow">
                                                                <span class="placeholder col-6"></span>
                                                            </div>
                                                            <p class="card-text placeholder-glow">
                                                                <span class="placeholder col-7"></span>
                                                                <span class="placeholder col-4"></span>
                                                                <span class="placeholder col-4"></span>
                                                                <span class="placeholder col-6"></span>
                                                                <span class="placeholder col-8"></span>
                                                            </p>
                                                            <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
                                                        </div>
                                                    </div>
                                                
                                            
How it works#

Create placeholders with the .placeholder class and a grid column class (e.g., .col-6) to set the width. They can replace the text inside an element or be added as a modifier class to an existing component.

html
                                                
                                                    <p aria-hidden="true">
                                                        <span class="placeholder col-6"></span>
                                                    </p>

                                                    <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>
                                                
                                            
Width#

You can change the width through grid column classes, width utilities, or inline styles.

html
                                                
                                                    <span class="placeholder col-6"></span>
                                                    <span class="placeholder w-75"></span>
                                                    <span class="placeholder" style="width: 25%;"></span>
                                                
                                            
Color#

By default, the placeholder uses currentColor. This can be overridden with a custom color or utility class.

html
                                                
                                                    <span class="placeholder col-12"></span>
                                                    <span class="placeholder col-12 bg-primary"></span>
                                                    <span class="placeholder col-12 bg-secondary"></span>
                                                    <span class="placeholder col-12 bg-success"></span>
                                                    <span class="placeholder col-12 bg-danger"></span>
                                                    <span class="placeholder col-12 bg-warning"></span>
                                                    <span class="placeholder col-12 bg-info"></span>
                                                    <span class="placeholder col-12 bg-light"></span>
                                                    <span class="placeholder col-12 bg-dark"></span>
                                                
                                            
© Larkon. Crafted by Techzaa