Alerts

Alerts are the important messages that are used to grab the user's attention without interrupting the user flow.

Primary alert

    <div class="alert alert-primary"> 
        <i class="fas fa-info-circle"></i> This is a primary alert.
    </div>

Info alert

    <div class="alert alert-info"> 
        <i class="fas fa-info-circle"></i> This is an info message.
    </div>
    

Success alert

    <div class="alert alert-success"> 
        <i class="fas fa-check"></i> This is a success message.
    </div>
        

Warning alert

    <div class="alert alert-warning"> 
        <i class="fas fa-exclamation-triangle"></i> This is a warning message.
    </div>
    

Error alert

    <div class="alert alert-error"> 
        <i class="fas fa-times-circle"></i> This is a error message.
    </div>
    

Alert with close button

    <div class="alert alert-primary align-center"> 
        <i class="p-right fas fa-info-circle"></i> This is a primary alert.
        <i class="alert-close-icon far fa-times-circle"></i>
    </div>
    

Avatars

Avatar is a circle that represents a user. Typically used with a user's profile image.

Image Avatars

    <img class="avatar-reg avatar" src="//boredhumans.b-cdn.net/faces2/286.jpg" alt="user">
    

Avatars in different sizes

    <img class="avatar-xsm avatar" src="//boredhumans.b-cdn.net/faces2/872.jpg" alt="user">

    <img class="avatar-sm avatar" src="//boredhumans.b-cdn.net/faces2/914.jpg" alt="user">

    <img class="avatar-md avatar" src="//boredhumans.b-cdn.net/faces2/286.jpg" alt="user">

    <img class="avatar-reg avatar" src="//boredhumans.b-cdn.net/faces2/606.jpg" alt="user">

    <img class="avatar-lg avatar" src="//boredhumans.b-cdn.net/faces2/738.jpg" alt="user">

    <img class="avatar-xlg avatar" src="//boredhumans.b-cdn.net/faces2/674.jpg" alt="user">

Fallback Avatar

    <img class="avatar-md avatar" src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460__480.png" alt="user">
    

Badges

Badges can be used for an additional marker for avatar, card or any other component.

Badge on Icon

    <div class="m1 badge-container">
        <i class="badge-icon fas fa-home"></i>
        <span class="badge badge-right badge-sm">1</span>
    </div>
    

Badge on Avatars

4

7

    <div class="m1 badge-container">
        <img class="avatar-md avatar" src="https://boredhumans.b-cdn.net/faces2/606.jpg" alt="user">
        <span class="badge badge-img badge-bottom-left badge-md">4</span>
    </div>
    <div class="m1 badge-container">
        <img class="avatar-md avatar" src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460__480.png" alt="user">
        <span class="badge badge-img badge-right badge-lg">7</span>
    </div>

Text Badge

NEW

Popular

    <div class="m1 badge-container">
        <img class="avatar-lg avatar" src="//boredhumans.b-cdn.net/faces2/738.jpg" alt="user">
        <span class="badge-text">NEW</span>
    </div>

Buttons

Buttons are also called as call to action. We have range of buttons . You need to add respective classes, and you are good to go.

Solid Buttons

    <button class="btn btn-primary">Primary Button</button>
    <button class="btn btn-secondary">Secondary Button</button>

Outlined Buttons

    <button class="btn btn-primary-outline">Primary Outline</button>
    <button class="btn btn-secondary-outline">Sec Outline Button</button>

Link Buttons

    <button class="btn btn-link">Link Button</button>
    <button class="btn btn-link-underline">Link Button</button>

Icon Buttons

    <button class="btn btn-icon1"><i class="fas fa-shopping-cart"></i></button>
    <button class="m1 btn btn-icon2"><i class="fas fa-shopping-cart"></i></button>
    <button class="btn btn-with-icon">
        <i class="p1-right fas fa-shopping-cart"></i>Add to cart
    </button>

Floating Buttons

    <button class="btn btn-floating"><i class="fas fa-plus"></i></button>

Disabled Buttons

    <button class="btn btn-primary btn-disabled">Primary Button</button>
    <button class="btn btn-link-underline btn-disabled">Link Button</button>
    <button class="btn btn-icon1 btn-disabled">
        <i class="fas fa-shopping-cart"></i>
    </button>

Cards

A card is a sheet used to represent the information related to each other like product details.

Card with badge

NEW

Fiddle Leaf Fig Plant

Stock available

Rs. 550

    <div class="m1 card card-vertical-container1">
        <div class="badge-container">
            <span class="badge-text">NEW</span>
            <img src="./images/fiddle-leaf.jpg" alt="Fiddle Leaf fig" class="card-img">
        </div>
        <div class="p1 card-text-container">
                <h5 class="card-header">Fiddle Leaf Fig Plant</h5>
                <div class="card-info">Stock available</div>
                <div class="align-center">
                    <p class="card-price">Rs. 550</p>
                    <button class="btn btn-icon1 card-icon-btn m-left-auto">
                        <i class="far fa-heart"></i>
                    </button>
                </div>  
        </div>
    </div>

Card with dismiss

Croton Plant

Stock available

Rs. 499

Neque porro quisquam est qui adipisci velit...

Add to cart

    <div class="m1 card card-vertical-container2">
        <img src="./images/croton.jpg" alt="croton" class="card-img">
        <i class="card-close-btn fas fa-times"></i>
        <div class="p1 card-text-container">
            <div class="card-heading flex-r">
                <div>
                    <h5 class="card-header">Croton Plant</h5>
                    <div class="card-info">Stock available</div>
                </div>
                <p class="card-price m-left-auto">Rs. 499</p>
            </div>
            <h6>Neque porro quisquam est qui adipisci velit...</h6>
            <div class="card-btns align-center">
                <button class="btn btn-with-icon">
                    <i class="p1-right fas fa-shopping-cart"></i>Add to cart
                </button>
                <button class="btn btn-icon1 card-icon-btn m-left-auto">
                    <i class="far fa-heart"></i>
                </button>
            </div>
        </div> 
    </div>

Card with text overlay

Sold Out!

Croton Plant

Stock available

Rs. 499

Neque porro quisquam est qui adipisci velit...

Add to cart

    <div class="m1 card card-vertical-container2">
        <h4 class="overlay-text">Sold Out!</h4>
        <div class="overlay-container">
        <img src="./images/croton.jpg" alt="croton" class="card-img">
        <i class="card-close-btn btn-disabled fas fa-times"></i>
        <div class="p1 card-text-container">
            <div class="card-heading flex-r">
                <div>
                    <h5 class="card-header">Croton Plant</h5>
                    <div class="card-info">Stock available</div>
                </div>
                <p class="card-price m-left-auto">Rs. 499</p>
            </div>
            <h6>Neque porro quisquam est qui  adipisci velit...</h6>
            <div class="card-btns align-center">
                <button class="btn btn-with-icon btn-disabled">
                    <i class="p1-right fas fa-shopping-cart"></i>Add to cart
                </button>
                <button class="btn btn-icon1 card-icon-btn btn-disabled m-left-auto">
                    <i class="far fa-heart"></i>
                </button>
            </div>
        </div> </div>
    </div>

Text only Card

    <div class="m1 card card-vertical-container2">
        <div class="p1">
            <h4 class="card-header">Croton Plant</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur 
                adipiscing elit. Sed faucibus diam vitae erat ullamcorper elementum. 
                Donec et ante porta, euismod turpis vitae, tincidunt elit.
            </p>
            <div class="card-btns">
                <button class="btn btn-primary">Learn More </button>          
            </div>
        </div> 
    </div>
    

Vertical Card

Croton Plant

Stock available

Rs. 499

Neque porro quisquam est qui adipisci velit...

Add to cart

    <div class="m1 card card-vertical-container2">
        <img src="./images/croton.jpg" alt="croton" class="card-img">
        <div class="p1 card-text-container">
            <div class="card-heading flex-r">
                <div>
                    <h5 class="card-header">Croton Plant</h5>
                    <div class="card-info">Stock available</div>
                </div>
                <p class="card-price m-left-auto">Rs. 499</p>
            </div>
            <h6>Neque porro quisquam est qui  adipisci velit...</h6>
            <div class="card-btns align-center">
                <button class="btn btn-with-icon">
                    <i class="p1-right fas fa-shopping-cart"></i>Add to cart
                </button>
                <button class="btn btn-icon1 card-icon-btn m-left-auto">
                    <i class="far fa-heart"></i>
                </button>
            </div>
        </div> 
    </div>

Horizontal Card

NEW

Croton Plant

Stock available

Rs. 499

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, adipisci velit...

Add to cart Move to Wishlist

    <div class="m1 card flex-r card-horizontal-container">
        <div class="badge-container">
            <span class="badge-text">NEW</span>
            <img src="./images/croton.jpg" alt="croton" class="card-img">
        </div>
        <div class="card-text-container">
            <h5 class="card-header">Croton Plant</h5>
            <div class="card-info">Stock available</div>
            <p class="card-price">Rs. 499</p>
            <h6>Neque porro quisquam est qui dolorem ipsum quia 
                dolor sit amet, adipisci velit...</h6>
            <div class="card-btns align-center">
                <button class="btn btn-with-icon">
                    <i class="p1-right fas fa-shopping-cart"></i>Add to cart</button>
                <button class="m1 btn btn-primary-outline">Move to Wishlist</button>           
            </div>
        </div> 
    </div>

Images

Images can be responsive to fit the parent's width, and also can be customised to be round shaped.

Responsive Image

    <img class="responsive-img" src="./images/res.webp" alt="Responsive img">

Round Image

    <img class="round-img" src="./images/succulent.jpg" alt="Succulent">

Input Component

Examples of Textbox, Textbox with error styling, and form is given below.

Textbox

    <div class="input-container">
        <label class="input-label" for="name">Username</label>
        <input id="name" class="input-field" type="text" placeholder="Username">
    </div>

Textbox with error styling

    <div class="input-container">
        <label class="input-label input-error-label" for="error-name">Username</label>
        <input id="error-name" class="input-error-field" type="text" placeholder="Username">
        <span class="validation-error">Not valid</span>
    </div>

Input with Icon

    <div class="input-container">
        <input class="input-icon-field input-field" type="text" placeholder="Search">
        <i class="input-icon fas fa-search"></i>
    </div>

Form Example

    <form class="form">
        <div class="input-container">
            <label class="input-label" for="username">Username</label>
            <input class="input-field" type="text" id="username" placeholder="Username">
        </div>

        <div class="input-container">
            <label class="input-label" for="number">Phone Number</label>
            <input class="input-field" type="number" id="number" placeholder="Phone Number">
        </div>

        <div class="input-container">
            <label class="input-label" for="email">Email</label>
            <input class="input-field" type="email" id="email" placeholder="Email">
        </div>

        <div class="checkbox">
            <input class="checkbox-input" type="checkbox"> 
            <label class="checkbox-label">Yes, I accept the terms.</label>
        </div>
        <button class="btn btn-secondary">Submit</button>
    </form>

Typography

Example of Heading Text

For heading you can use h1, h2, h3, h4, h5, h6 elements.

    
    <h1>This is h1 heading.</h1>
    <h2>This is h2 heading.</h2>
    <h3>This is h3 heading.</h3>
    <h4>This is h4 heading.</h4>
    <h5>This is h5 heading.</h5>
    <h6>This is h6 heading.</h6>
    

Example of Paragraph Text

Paragraph text is avaliable in differnt sizes. You have to add the appropriate classes to the p tag or the wrapper element.

    
    <p class="text-xlg">Extra large text size.</p>
    <p class="text-lg">Large text size.</p>
    <p class="text-md">Medium text size.</p>
    <p class="text-sm">Small text size.</p>
    <p class="text-xsm">Extra small text size.</p>
    

Example of Text Alignment.

For text alingment you can add the following classes to the wrapper element.

    
    <p class="text-left">Text is aligned to left.</p>
    <p class="text-center">Text is aligned to center.</p>
    <p class="text-right">Text is aligned to right.</p>
    

Some Extra text utilities.

There are some extra text utilities mentioned below. You have to add the corresponding classes to the wrapper element to use them.

    
        <p class="text-bold-weight">Bold weight text</p>
        <p class="text-regular-weight">Regular weight text</p>
        <p class="text-light-weight">Light weight text</p>
        <p class="text-primary-color">Text with Primary color</p>
        <p class="text-seconadry-color">Text with Secondary color</p>
        <p class="text-strike-through">Text Strike through</p>
        <p class="text-underline">Text underlined</p>
    

Lists

Example of Unordered list

    
        <ul>
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>

        <ul class="list-style-circle">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>

        <ul class="list-style-square">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    

Example of Ordered list

    
        <ol>
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ol>
        <ol reversed="">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ol>
        <ol class="list-style-upper-roman">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ol>
        <ol class="list-style-lower-roman">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ol>
        <ol class="list-style-upper-alpha">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ol>
        <ol class="list-style-lower-alpha">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ol>
    

List with no styling

    
        <ul class="list-non-bullet">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    

Stacked List

This is an unordered list without bullets. We can add desired component inside the li element.

    
        <ul class="list-non-bullet">
            <li>
                <div class="notification flex-r">
                    Stacked Notification
                    <i class="m-left-auto far fa-times-circle"></i>
                </div>
            </li>
            <li>
                <div class="notification flex-r">
                    Stacked Notification
                    <i class="m-left-auto far fa-times-circle"></i>
                </div>
            </li>
            <li>
                <div class="notification flex-r">
                    Stacked Notification
                    <i class="m-left-auto far fa-times-circle"></i>
                </div>
            </li>
        </ul> 
    

Navigation

Navigation component allows the user to navigate to different pages of the website.

    
        <nav class="nav-container align-center">

            <div class="p2 nav-logo flex-r">
                <i class="app-icon fab fa-pagelines"></i>
                <span class="app-name">FloraShop</span>
            </div>
    
            <div class="nav-link">
            <a href=""><button class="btn btn-link nav-btn">Home</button></a>
            <a href=""><button class="btn btn-link nav-btn">About us</button></a>
            </div>
    
            <div class="search-input input-container">
                <input class="input-icon-field input-field" type="text" placeholder="Search">
                <i class="input-icon fas fa-search"></i>
            </div>
    
            <div class="flex-r nav-icons">

            <div class="flex-c center">
                <div class="m1 badge-container">
                    <a href=""><i class="nav-icon badge-icon fas fa-user"></i></a>
                </div>
                <span class="nav-icon-text">Account</span>
            </div>
    
            <div class="flex-c center">
                <div class="m1 badge-container">
                    <a href=""><i class="nav-icon badge-icon far fa-heart"></i></a>
                    <span class="badge badge-right badge-sm">1</span>
                </div>
                <span class="nav-icon-text">Wishlist</span>
            </div>
            </div>
    
        </nav>
    

Modal

A modal is a dialog box or a popup window that is displayed on top of the current page.

Modal Component

    
        <div class="modal-container">
            <div class="flex-r">
                <button class="modal-close-btn m-left-auto">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            <div class="text-center">
                <h3 class="p1">This is a Demo Modal.</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ex ea commodo consequat. </p>
            </div>
            <div class="modal-footer flex-r">
                <button class="btn btn-primary">Save</button>
                <button class="btn btn-primary-outline">Cancel</button>
            </div>
        </div>
    

Live Demo

Click on below open modal button to open the modal.To close the pop-up, click on close icon or Back button.

    
        <div class="show-modal center hide">
            <div class="modal-container ">
                <div class="flex-r">
                    <button id="modal-close-btn" class="modal-close-btn m-left-auto">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>
                <div class="text-center">
                    <h3 class="p1">This is a Demo Modal.</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ex ea commodo consequat. </p>
                </div>
                <div class="modal-footer flex-r">
                    <button class="btn btn-primary">Save</button>
                    <button class="btn btn-primary-outline">Cancel</button>
                </div>
            </div>
        </div>
    

Rating

Rating components can be used as read-only badge and can be used in reviews section as form too.

Rating Components

    
        <!-- Rating Form -->
        <form class="rating-form">
            <input class="rating-input" type="radio" id="star-1" name="star">
            <label for="star-1" class="rating-label"><i class="fa-solid fa-star"></i></label>

            <input class="rating-input" type="radio" id="star-2" name="star">
            <label for="star-2" class="rating-label"><i class="fa-solid fa-star"></i></label>

            <input class="rating-input" type="radio" id="star-3" name="star">
            <label for="star-3" class="rating-label"><i class="fa-solid fa-star"></i></label>

            <input class="rating-input" type="radio" id="star-4" name="star">
            <label for="star-4" class="rating-label"><i class="fa-solid fa-star"></i></label> 

            <input class="rating-input" type="radio" id="star-5" name="star">
            <label for="star-5" class="rating-label"><i class="fa-solid fa-star"></i></label>
        </form>

        <!-- Rating badge -->
        <div class="rating-badge align-center"> 
            4<i class="rating-badge-star fa-solid fa-star"></i> | 22
        </div>
    

Toast

Toasts provide brief feedback about an operation through a message. Toasts contain a single line of text directly related to the operation performed.

Simple Toasts

    
        <div class="toast toast-success text-lg">Saved successfully!</div>
        <div class="toast toast-error text-lg">Try Again Later!</div>
        <div class="toast toast-info text-lg">Info Toast</div>
    

Toast with close button

    
        <div class="toast toast-info align-center">
            <p class="text-lg">Can't send photo.</p>
            <i class="toast-icon fas fa-times"></i>
        </div>
    

Live Demo

Click on below open toast button to open a toast.It will disappear after 5 seconds.

    
        <div class="show-toast toast toast-info align-center">
            <p class="text-lg">Added to Bag.</p>
            <i class="toast-close-btn toast-icon fas fa-times"></i>
        </div> 
    

Simplified Grid

CSS grid creates complex responsive web design grid layouts more easily and consistently across browsers.

Two Column Grid

    
        <div class="grid grid-2-col">
            <div class="grid-item text-center text-xlg text-bold-weight">
                grid item 1
            </div>
            <div class="grid-item text-center text-xlg text-bold-weight">
                grid item 2
            </div>
        </div>
    

Two Row Grid

    
        <div class="grid grid-2-row">
            <div class="grid-item text-center text-xlg text-bold-weight">
                grid item 1
            </div>
            <div class="grid-item text-center text-xlg text-bold-weight">
                grid item 2
            </div>
        </div>
    

Three Column Grid

    
        <div class="grid grid-3-col">
            <div class="grid-item text-center text-xlg text-bold-weight">
                grid item 1
            </div>
            <div class="grid-item text-center text-xlg text-bold-weight">
                grid item 2
            </div>
            <div class="grid-item text-center text-xlg text-bold-weight">
                grid item 3
            </div>
        </div>
    

Three Row Grid

    
        <div class="grid grid-3-row">
            <div class="grid-item text-center text-xlg text-bold-weight">
                grid item 1
            </div>
            <div class="grid-item text-center text-xlg text-bold-weight">
                grid item 2
            </div>
            <div class="grid-item text-center text-xlg text-bold-weight">
                grid item 3
            </div>
        </div>
    

Slider

Sliders are used to decide range for something like sound in videos, price in shopping sites, etc.

Styled Slider

    
        <form>
            <label class="m1-right text-lg">Price</label>
            <input class="slider" type="range" min="1" max="100" value="50">
        </form>
    

Default Slider with Icon

    
        <form>
            <label class="m1-right text-lg">
                <i class="fa-solid fa-volume-high"></i>
            </label>
            <input type="range" min="1" max="100" value="50">
        </form>