Getting Started

For integrating via CDN -

Just add below link in your html file.

                            <link rel="stylesheet" href="https://seasoning-ui.netlify.app/seasoning.css">

For integrating via locally downloaded file -

Simply click the download button and paste the file in your css directory.

Download

Layout Primitives

col-12

col-6

col-4

col-3

col-2

col-1

col-2

col-5

col-3

col-1

                            <div class="col-12 layout-primitives__block">col-12</div>
                            <div class="col-11 layout-primitives__block">col-11</div>
                            <div class="col-10 layout-primitives__block">col-10</div>
                            <div class="col-9 layout-primitives__block">col-9</div>
                            <div class="col-8 layout-primitives__block">col-8</div>
                            <div class="col-7 layout-primitives__block">col-7</div>
                            <div class="col-6 layout-primitives__block">col-6</div>
                            <div class="col-5 layout-primitives__block">col-5</div>
                            <div class="col-4 layout-primitives__block">col-4</div>
                            <div class="col-3 layout-primitives__block">col-3</div>
                            <div class="col-2 layout-primitives__block">col-2</div>
                            <div class="col-1 layout-primitives__block">col-1</div>

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic, nisi?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, rerum.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, provident.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore, quasi.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, aliquam?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, maxime!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, facere.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, corporis!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, repudiandae.

Colors

#B91C1C

#1F2937

#FBBF24

#3B82F6

#1E3A8A

#21ba45

#065F46

#a333c8

#6435c9

#EC4899

#9D174D

#E0E7FF

#BFDBFE

#D1FAE5

#b5cc18

#00b5ad

#e0e1e2

#1070ca17

#f8f9fa

#F5F3FF

Images

                            <div class="row col-4 col-lg-5 col-md-6 col-sm-12">
                                <img src="./assets/avatar-5.png" class="image" alt="">
                            </div>
        
                            <div class="row col-4 col-lg-5 col-md-6 col-sm-12">
                                <img src="./assets/avatar-5.png" class="image image--round" alt="">
                            </div>

Button

Simple Button

                            <button class="btn">Submit</button>

Emphasized Buttons

A button can be formatted to show different levels of emphasis

                            <button class="btn btn--primary">Primary</button>
                            <button class="btn btn--secondary">Secondary</button>
                            <button class="btn btn--success">success</button>
                            <button class="btn btn--warning">warning</button>
                            <button class="btn btn--light">light</button>
                            <button class="btn btn--red">red</button>
                            <button class="btn btn--darkBlue">darkBlue</button>
                            <button class="btn btn--darkGreen">darkGreen</button>
                            <button class="btn btn--purple">purple</button>
                            <button class="btn btn--violet">violet</button>
                            <button class="btn btn--pink">pink</button>
                            <button class="btn btn--teal">teal</button>

Icon Button

A button can also have an icon

                            <button class="btn btn__icon">
                                <i class="fa fa-heart" aria-hidden="true"></i>
                            </button>
                
                            <button class="btn btn__icon btn--primary">
                                <i class="fa fa-motorcycle" aria-hidden="true"></i>
                            </button>
                
                            <button class="btn btn__icon btn--purple">
                                <i class="fa fa-mountain" aria-hidden="true"></i>
                            </button>
                
                            <button class="btn btn__icon btn--danger">
                                <i class="fa fa-newspaper" aria-hidden="true"></i>
                            </button>

Outline Buttons

These buttons are less pronounced

                            <button class="btn btn--outline">Outline</button>
                            <button class="btn btn--outline btn--primary">Primary And outline</button>
                            <button class="btn btn--outline btn--secondary">Secondary And outline</button>
                            <button class="btn btn--outline btn--success">success And outline</button>
                            <button class="btn btn--outline btn--warning">warning And outline</button>
                            <button class="btn btn--outline btn--light">light And outline</button>
                            <button class="btn btn--outline btn--red">red And outline</button>
                            <button class="btn btn--outline btn--darkBlue">darkBlue And outline</button>
                            <button class="btn btn--outline btn--darkGreen">darkGreen And outline</button>
                            <button class="btn btn--outline btn--purple">purple And outline</button>
                            <button class="btn btn--outline btn--violet">violet And outline</button>
                            <button class="btn btn--outline btn--pink">pink And outline</button>
                            <button class="btn btn--outline btn--teal">teal And outline</button>

Inverted Buttons

                            <button class="btn btn--inverted">Inverted</button>
                            <button class="btn btn--inverted btn--primary">Inverted and primary</button>
                            <button class="btn btn--inverted btn--secondary">Inverted and secondary</button>
                            <button class="btn btn--inverted btn--success">Inverted and success</button>
                            <button class="btn btn--inverted btn--warning">Inverted and warning</button>
                            <button class="btn btn--inverted btn--light">Inverted and light</button>
                            <button class="btn btn--inverted btn--red">Inverted and red</button>
                            <button class="btn btn--inverted btn--darkBlue">Inverted and darkBlue</button>
                            <button class="btn btn--inverted btn--darkGreen">Inverted and darkGreen</button>
                            <button class="btn btn--inverted btn--violet">Inverted and violet</button>
                            <button class="btn btn--inverted btn--pink">Inverted and pink</button>
                            <button class="btn btn--inverted btn--teal">Inverted and teal</button>

Inverted and outline Buttons

                            <button class="btn btn--inverted btn--outline">Inverted and outline</button>
                            <button class="btn btn--inverted btn--primary btn--outline">Inverted, outline and primary</button>
                            <button class="btn btn--inverted btn--secondary btn--outline">Inverted, outline and secondary</button>
                            <button class="btn btn--inverted btn--success btn--outline">Inverted, outline and success</button>
                            <button class="btn btn--inverted btn--warning btn--outline">Inverted, outline and warning</button>
                            <button class="btn btn--inverted btn--light btn--outline">Inverted, outline and light</button>
                            <button class="btn btn--inverted btn--red btn--outline">Inverted, outline and red</button>
                            <button class="btn btn--inverted btn--darkBlue btn--outline">Inverted, outline and darkBlue</button>
                            <button class="btn btn--inverted btn--darkGreen btn--outline">Inverted, outline and darkGreen</button>
                            <button class="btn btn--inverted btn--violet btn--outline">Inverted, outline and violet</button>
                            <button class="btn btn--inverted btn--pink btn--outline">Inverted, outline and pink</button>
                            <button class="btn btn--inverted btn--teal btn--outline">Inverted, outline and teal</button>

Badge and Pill

Badges

Badges as status

                            <div class="col-2 col-md-3 col-sm-4">
                                <div class="badge__container badge-image-eg">
                                    <img class="image image--round" src="./assets/avatar-4.png" alt="">
                                    <span class="badge badge--sm badge--round bg-green"></span>
                                </div>
                            </div>
        
                            <div class="col-2 col-md-3 col-sm-4">
                                <div class="badge__container badge-image-eg">
                                    <img class="image image--round" src="./assets/avatar-4.png" alt="">
                                    <span class="badge badge--sm badge--round bg-red"></span>
                                </div>
                            </div>
                            
                            <div class="col-2 col-md-3 col-sm-4">
                                <div class="badge__container badge-image-eg">
                                    <img class="image image--round" src="./assets/avatar-4.png" alt="">
                                    <span class="badge badge--sm badge--round bg-yellow"></span>
                                </div>
                            </div>
        
                            <div class="col-2 col-md-3 col-sm-4">
                                <div class="badge__container badge-image-eg">
                                    <img class="image image--round" src="./assets/avatar-4.png" alt="">
                                    <span class="badge badge--sm badge--round bg-grey"></span>
                                </div>
                            </div>

Badges to display count

3

5

10

1

                            <div class="col-2 col-md-3 col-sm-4">
                                <div class="badge__container badge-icon-eg">
                                    <i class="far fa-envelope text-red"></i>
                                    <span class="badge badge--md badge--round bg-red text-white">3</span>
                                </div>
                            </div>
        
                            <div class="col-2 col-md-3 col-sm-4">
                                <div class="badge__container badge-icon-eg">
                                    <i class="fas fa-comments text-blue"></i>
                                    <span class="badge badge--md badge--round bg-dark-blue text-white">5</span>
                                </div>
                            </div>
                            
                            <div class="col-2 col-md-3 col-sm-4">
                                <div class="badge__container badge-icon-eg">
                                    <i class="fas fa-bell text-violet"></i>
                                    <span class="badge badge--md badge--round bg-white">10</span>
                                </div>
                            </div>
        
                            <div class="col-2 col-md-3 col-sm-4">
                                <div class="badge__container badge-icon-eg">
                                    <i class="fas fa-shopping-cart text-dark-blue"></i>
                                    <span class="badge badge--md badge--round bg-grey">1</span>
                                </div>
                            </div>

Example of using badge on an ecommmerce card

Out of stock

Apple

Iphone X

Rs 380

Lorem ipsum dolor sit amet consectetur, adipisic elit. Corporis exerci illum assumenda pariatur .

                            <div class="col-3 col-xl-4 col-lg-5 col-md-7 col-sm-12 ">
                                <div class="card">
                                    <div class="card__img badge__container">
                                        <img src="./assets/product.jpg" alt="">
                                        <span class="badge bg-blue text-white" style="padding: 0.5em;">Out of stock</span>
                                    </div>
                                    <div class="card__body">
                                        <p class="card__meta">Apple</p>
                                        <p class="card__title">Iphone X</p>
                                        <p class="card__lead">Rs 380</p>
                                        <p class="card__description">Lorem ipsum dolor sit amet consectetur, adipisic elit. Corporis exerci illum assumenda pariatur .</p>
                                    </div>
                                </div>  
                            </div>

Pills

Small sized pills

Small pill Small pill Small pill Small pill Small pill Small pill Small pill Small pill Small pill Small pill Small pill

                            <span class="pill bg-blue text-white">Small pill</span>
                            <span class="pill bg-yellow text-white">Small pill</span>
                            <span class="pill bg-pink text-white">Small pill</span>
                            <span class="pill bg-green text-white">Small pill</span>
                            <span class="pill bg-red text-white">Small pill</span>
                            <span class="pill bg-violet text-white">Small pill</span>
                            <span class="pill bg-dark-blue text-white">Small pill</span>
                            <span class="pill bg-black text-white">Small pill</span>
                            <span class="pill bg-dark-green text-white">Small pill</span>
                            <span class="pill bg-light-green text-black">Small pill</span>
                            <span class="pill bg-purple text-white">Small pill</span>

Medium sized pills

Medium pill Medium pill Medium pill Medium pill Medium pill Medium pill Medium pill Medium pill Medium pill Medium pill Medium pill

                            <span class="pill pill-md bg-blue text-white">Medium pill</span>
                            <span class="pill pill-md bg-pink text-white">Medium pill</span>
                            <span class="pill pill-md bg-green text-white">Medium pill</span>
                            <span class="pill pill-md bg-yellow text-white">Medium pill</span>
                            <span class="pill pill-md bg-red text-white">Medium pill</span>
                            <span class="pill pill-md bg-violet text-white">Medium pill</span>
                            <span class="pill pill-md bg-dark-blue text-white">Medium pill</span>
                            <span class="pill pill-md bg-black text-white">Medium pill</span>
                            <span class="pill pill-md bg-dark-green text-white">Medium pill</span> 
                            <span class="pill pill-md bg-light-green text-black">Medium pill</span>
                            <span class="pill pill-md bg-purple text-white">Medium pill</span>

Large sized pills

Large pill Large pill Large pill Large pill Large pill Large pill Large pill Large pill Large pill Large pill Large pill

                            <span class="pill pill-lg bg-blue text-white">Large pill</span>
                            <span class="pill pill-lg bg-yellow text-white">Large pill</span>
                            <span class="pill pill-lg bg-pink text-white">Large pill</span>
                            <span class="pill pill-lg bg-green text-white">Large pill</span>
                            <span class="pill pill-lg bg-red text-white">Large pill</span>
                            <span class="pill pill-lg bg-violet text-white">Large pill</span>
                            <span class="pill pill-lg bg-dark-blue text-white">Large pill</span>
                            <span class="pill pill-lg bg-black text-white">Large pill</span>
                            <span class="pill pill-lg bg-dark-green text-white">Large pill</span>
                            <span class="pill pill-lg bg-light-green text-black">Large pill</span>
                            <span class="pill pill-lg bg-purple text-white">Large pill</span>

Text Input

Standard Input

                            <div class="input">
                                <input type="text" placeholder="Enter text">
                            </div>

Interacting Input

An input field can show a user is currently interacting with it

                            <div class="input focus">
                                <input type="text" placeholder="Enter text">
                            </div>

Disabled

An input field can show that it is disabled

                            <div class="input disabled">
                                <input type="text" placeholder="Enter text" tabindex="-1">
                            </div>
                            <div class="input input--icon disabled">
                                <input type="text" placeholder="Enter text" tabindex="-1">
                                <i class="fa fa-search"></i>
                            </div>

Error

An input field can show a user if some validation error is present.

                            <div class="input error">
                                <input type="text" placeholder="Enter text">
                            </div>

Icon

An input can be formatted with an icon

                            <div class="input input--icon">
                                <input type="text" placeholder="Enter text">
                                <i class="fa fa-search"></i>
                            </div>
                            <div class="input input--icon">
                                <i class="fa fa-search"></i>
                                <input type="text" placeholder="Enter text">
                            </div>

Labeled

An input can be formatted with a label

http://

.com

kg

http://

.com

                            <div class="input input--label">
                                <div class="input__label input__label--prepend">http://</div>
                                <input type="text" placeholder="Enter text">
                            </div>
                            <div class="input input--label">
                                <input type="text" placeholder="Enter text">
                                <div class="input__label input__label--append">.com</div>
                            </div>
                            <div class="input input--label error">
                                <input type="text" placeholder="Enter text">
                                <div class="input__label input__label--append">kg</div>
                            </div>
                           <div class="input input--label">
                                <div class="input__label input__label--prepend input__label--basic">http://</div>
                                <input type="text" placeholder="Enter text">
                            </div>
                            <div class="input input--label">
                                <input type="text" placeholder="Enter text">
                                <div class="input__label input__label--append input__label--basic">.com</div>
                            </div>

Transparent

A transparent input has no background

http://

.com

http://

.com

                            <div class="input input--transparent">
                                <input type="text" placeholder="Search">
                            </div>
                            <div class="input input--label input--transparent">
                                <div class="input__label input__label--prepend input__label--basic">http://</div>
                                <input type="text" placeholder="Enter text">
                            </div>
                            <div class="input input--label input--transparent">
                                <input type="text" placeholder="Enter text">
                                <div class="input__label input__label--append input__label--basic">.com</div>
                            </div>
                            <div class="input input--label input--transparent">
                                <div class="input__label input__label--prepend">http://</div>
                                <input type="text" placeholder="Enter text">
                            </div>
                            <div class="input input--label input--transparent">
                                <input type="text" placeholder="Enter text">
                                <div class="input__label input__label--append">.com</div>
                            </div>

Inverted

An input can be formatted to appear on dark backgrounds

.com

http://

.com

http://

.com

                            <div class="input">
                                <input type="text" placeholder="Search">
                            </div>

                            <div class="input input--label">
                                <input type="text" placeholder="Enter text">
                                <div class="input__label input__label--append">.com</div>
                            </div>
                            
                            <div class="input input--label input--inverted">
                                <div class="input__label input__label--prepend input__label--basic">http://</div>
                                <input type="text" placeholder="Enter text">
                            </div>

                            <div class="input input--label input--inverted">
                                <input type="text" placeholder="Enter text">
                                <div class="input__label input__label--append input__label--basic">.com</div>
                            </div>    
                            
                            <div class="input input--label input--inverted">
                                <div class="input__label input__label--prepend">http://</div>
                                <input type="text" placeholder="Enter text">
                            </div>
                            
                            <div class="input input--label input--inverted">
                                <input type="text" placeholder="Enter text">
                                <div class="input__label input__label--append">.com</div>
                            </div>

Fluid

An input can take the size of its container

                            <div class="input input--fluid">
                                <input type="text" placeholder="Enter text">
                            </div>

                            <div class="input input--fluid input--icon">
                                <i class="fa fa-search"></i>
                                <input type="text" placeholder="Enter text">
                            </div>

Size

An input can vary in size

                            <div class="input input--small input--icon">
                                <i class="fa fa-search"></i>
                                <input type="text" placeholder="Enter text">
                            </div>

                            <br><br>
                            
                            <div class="input input--medium input--icon">
                                <i class="fa fa-search"></i>
                                <input type="text" placeholder="Enter text">
                            </div>
                
                            <br><br>

                            <div class="input input--large input--icon">
                                <i class="fa fa-search"></i>
                                <input type="text" placeholder="Enter text">
                            </div>

Select

                            <div class="custom-dropdown">
                                <select class="custom-dropdown__menu">
                                    <option value="">Something 1</option>
                                    <option value="">Something 2</option>
                                    <option value="">Something 3</option>
                                    <option value="">Something 4</option>
                                    <option value="">Something 5</option>
                                </select>
                            </div>

                            <div class="custom-dropdown custom-dropdown--medium">
                                <select class="custom-dropdown__menu">
                                    <option value="" >Something 1</option>
                                    <option value="" >Something 2</option>
                                    <option value="" >Something 3</option>
                                    <option value="" >Something 4</option>
                                    <option value="" >Something 5</option>
                                </select>
                            </div>

                            <div class="custom-dropdown custom-dropdown--large">
                                <select class="custom-dropdown__menu">
                                    <option value="" >Something 1</option>
                                    <option value="" >Something 2</option>
                                    <option value="" >Something 3</option>
                                    <option value="" >Something 4</option>
                                    <option value="" >Something 5</option>
                                </select>
                            </div>

Select Menu

                            <div class="dropdown" tabindex="0">
                                <button class="dropdown__toggle btn" type="button">DropDown Button</button>
                                <div class="dropdown__menu">
                                    <a href="#" class="dropdown__item">Something 1</a>
                                    <a href="#" class="dropdown__item">Something 2 </a>
                                    <a href="#" class="dropdown__item">Something 3</a>
                                    <div class="dropdown__divider"></div>
                                    <a href="#" class="dropdown__item">Something else here</a>
                                </div>
                            </div>

                            <div class="dropdown dropdown--right"  tabindex="0">
                                <button class="dropdown__toggle btn btn--secondary" type="button">DropDown Button</button>
                                <div class="dropdown__menu">
                                    <a href="#" class="dropdown__item">Something 1</a>
                                    <a href="#" class="dropdown__item">Something 2 </a>
                                    <a href="#" class="dropdown__item">Something 3</a>
                                    <div class="dropdown__divider"></div>
                                    <a href="#" class="dropdown__item">Something else here</a>
                                </div>
                            </div>

Rating

                            <div class="rating__container rating--heart">
                                <label class="rating__control" for="rating1"></label>
                                <input class="rating__input" type="radio" name="rating" id="rating1">
                
                                <label class="rating__control" for="rating2"></label>                
                                <input class="rating__input" type="radio" name="rating" id="rating2">
                                
                                <label class="rating__control" for="rating3"></label>
                                <input class="rating__input" type="radio" name="rating" id="rating3">
                                
                                <label class="rating__control" for="rating4"></label>
                                <input class="rating__input" type="radio" name="rating" id="rating4" checked>
                
                                <label class="rating__control" for="rating5"></label>
                                 <input class="rating__input" type="radio" name="rating" id="rating5">
                            </div>

                            <div class="rating__container rating--star">
                                <label class="rating__control" for="ratingA"></label>
                                <input class="rating__input" type="radio" name="rating1" id="ratingA" checked>
                
                                <label class="rating__control" for="ratingB"></label>                
                                <input class="rating__input" type="radio" name="rating1" id="ratingB" >
                                
                                <label class="rating__control" for="ratingC"></label>
                                <input class="rating__input" type="radio" name="rating1" id="ratingC">
                                
                                <label class="rating__control" for="ratingD"></label>
                                <input class="rating__input" type="radio" name="rating1" id="ratingD">
                
                                <label class="rating__control" for="ratingE"></label>
                                 <input class="rating__input" type="radio" name="rating1" id="ratingE">
                            </div>

                            <div class="rating__container rating--heart rating--md">
                                <label class="rating__control" for="rating-md-1"></label>
                                <input class="rating__input" type="radio" name="rating" id="rating-md-1">
                
                                <label class="rating__control" for="rating-md-2"></label>                
                                <input class="rating__input" type="radio" name="rating" id="rating-md-2">
                                
                                <label class="rating__control" for="rating-md-3"></label>
                                <input class="rating__input" type="radio" name="rating" id="rating-md-3">
                                
                                <label class="rating__control" for="rating-md-4"></label>
                                <input class="rating__input" type="radio" name="rating" id="rating-md-4" checked>
                
                                <label class="rating__control" for="rating-md-5"></label>
                                 <input class="rating__input" type="radio" name="rating" id="rating-md-5">
                            </div>
        
                            <div class="rating__container rating--star rating--md">
                                <label class="rating__control" for="rating-md-A"></label>
                                <input class="rating__input" type="radio" name="rating1" id="rating-md-A" checked>
                
                                <label class="rating__control" for="rating-md-B"></label>                
                                <input class="rating__input" type="radio" name="rating1" id="rating-md-B" >
                                
                                <label class="rating__control" for="rating-md-C"></label>
                                <input class="rating__input" type="radio" name="rating1" id="rating-md-C">
                                
                                <label class="rating__control" for="rating-md-D"></label>
                                <input class="rating__input" type="radio" name="rating1" id="rating-md-D">
                
                                <label class="rating__control" for="rating-md-E"></label>
                                 <input class="rating__input" type="radio" name="rating1" id="rating-md-E">
                            </div>

                            <div class="rating__container rating--heart rating--lg">
                                <label class="rating__control" for="rating1"></label>
                                <input class="rating__input" type="radio" name="rating" id="rating1">
                
                                <label class="rating__control" for="rating2"></label>                
                                <input class="rating__input" type="radio" name="rating" id="rating2">
                                
                                <label class="rating__control" for="rating3"></label>
                                <input class="rating__input" type="radio" name="rating" id="rating3">
                                
                                <label class="rating__control" for="rating4"></label>
                                <input class="rating__input" type="radio" name="rating" id="rating4" checked>
                
                                <label class="rating__control" for="rating5"></label>
                                 <input class="rating__input" type="radio" name="rating" id="rating5">
                            </div>

                            <div class="rating__container rating--star rating--lg">
                                <label class="rating__control" for="ratingA"></label>
                                <input class="rating__input" type="radio" name="rating1" id="ratingA" checked>
                
                                <label class="rating__control" for="ratingB"></label>                
                                <input class="rating__input" type="radio" name="rating1" id="ratingB" >
                                
                                <label class="rating__control" for="ratingC"></label>
                                <input class="rating__input" type="radio" name="rating1" id="ratingC">
                                
                                <label class="rating__control" for="ratingD"></label>
                                <input class="rating__input" type="radio" name="rating1" id="ratingD">
                
                                <label class="rating__control" for="ratingE"></label>
                                 <input class="rating__input" type="radio" name="rating1" id="ratingE">
                            </div>

Alert

Hey! Your Tansaction has been Successfully Made!

Hey! Your Tansaction has failed. Please try again!

Hey! Some warning is there. Please review it and do the needful!

Just a notification message

Another notification without icon

Just a notification message

A notification without icon

                            <div class="col-4 col-lg-6 col-md-12 alert bg-green text-light-green">
                                <i class="fa fa-check" aria-hidden="true"></i>
                                <p>Hey! Your Tansaction has been Successfully Made!</p>
                            </div>
                            <div class="col-4 col-lg-6 col-md-12 alert bg-red text-white">
                                <i class="fa fa-times" aria-hidden="true"></i>
                                <p>Hey! Your Tansaction has failed. Please try again!</p>
                            </div>
                            <div class="col-4 col-lg-6 col-md-12 alert bg-yellow text-white">
                                <i class="fa fa-exclamation" aria-hidden="true"></i>
                                <p>Hey! Some warning is there. Please review it and do the needful!</p>
                            </div>
                            <div class="col-4 col-lg-6 col-md-12 alert bg-blue text-light-blue">
                                <i class="fa fa-bug" aria-hidden="true"></i>
                                <p>Just a notification message</p>
                            </div>
                            <div class="col-4 col-lg-6 col-md-12 alert bg-pink text-white">
                                <i class="fa fa-envelope" aria-hidden="true"></i>
                                <p>Another notification without icon</p>
                            </div>
                            <div class="col-4 col-lg-6 col-md-12 alert bg-violet text-white">
                                <i class="fa fa-bell" aria-hidden="true"></i>
                                <p>Just a notification message</p>
                            </div>
                            <div class="col-4 col-lg-6 col-md-12 alert bg-purple text-white">
                                <p>A notification without icon</p>
                            </div>

Hey! Your Tansaction has been Successfully Made!

Hey! Your Tansaction has failed unfortunately. Please try again!

Hey! Some warning is there. Please review it and do the needful!

                            <div class="col-4 col-lg-6 col-md-12 alert-message bg-green text-light-green">
                                <i class="fa fa-check" aria-hidden="true"></i>
                                <p>Hey! Your Tansaction has been Successfully Made!</p>
                            </div>
                            <div class="col-4 col-lg-6 col-md-12 alert-message bg-red text-white">
                                <i class="fa fa-times" aria-hidden="true"></i>
                                <p>Hey! Your Tansaction has failed unfortunately. Please try again!</p>
                            </div>
                            <div class="col-4 col-lg-6 col-md-12 alert-message bg-yellow text-white">
                                <i class="fa fa-exclamation" aria-hidden="true"></i>
                                <p>Hey! Some warning is there. Please review it and do the needful!</p>
                            </div>

Hey! Your Tansaction has been Successfully Made!

Hey! Your Tansaction has failed unfortunately. Please try again!

Hey! Some warning is there. Please review it and do the needful!

                            <div class="col-4 col-lg-6 col-md-12 alert alert-message bg-green text-light-green">
                                <i class="fa fa-check" aria-hidden="true"></i>
                                <p>Hey! Your Tansaction has been Successfully Made!</p>
                            </div>
                            <div class="col-4 col-lg-6 col-md-12 alert alert-message bg-red text-white">
                                <i class="fa fa-times" aria-hidden="true"></i>
                                <p>Hey! Your Tansaction has failed unfortunately. Please try again!</p>
                            </div>
                            <div class="col-4 col-lg-6 col-md-12 alert alert-message bg-yellow text-white">
                                <i class="fa fa-exclamation" aria-hidden="true"></i>
                                <p>Hey! Some warning is there. Please review it and do the needful!</p>
                            </div>

Card

Simple card

Sarthak

Joined in 2020

Lorem ipsum dolor sit amet consectetur, adipisic elit. Corporis exerci illum assumenda pariatur .

                            <div class="card col-3 col-xl-4 col-lg-5 col-md-7 col-sm-12 ">
                                <div class="card__body">
                                    <p class="card__title">Sarthak</p>
                                    <p class="card__meta">Joined in 2020</p>
                                    <p class="card__description">Lorem ipsum dolor sit amet consectetur, adipisic elit. Corporis exerci illum assumenda pariatur .</p>
                                </div>
                                <div class="card__footer">
                                    <p>
                                        <span class="card__icon">
                                            <i class="fas fa-laptop-code"></i>
                                        </span>
                                        Frontend Developer
                                    </p>
                                </div>
                            </div>

Social Media card

Sarthak

Joined in 2020

Lorem ipsum dolor sit amet consectetur, adipisic elit. Corporis exerci illum assumenda pariatur .

3 comments
17 likes

                            <div class="col-3 col-xl-4 col-lg-5 col-md-7 col-sm-12 ">
                                <div class="card">
                                    <div class="card__img">
                                        <img src="./assets/avatar1.png">
                                    </div>
                                    <div class="card__body">
                                        <p class="card__title">Sarthak</p>
                                        <p class="card__meta">Joined in 2020</p>
                                        <p class="card__description">Lorem ipsum dolor sit amet consectetur, adipisic elit. Corporis exerci illum assumenda pariatur .</p>
                                    </div>
                                    <div class="card__footer">
                                        <p>
                                            <span class="card__icon">
                                                <i class="far fa-user"></i>
                                            </span>
                                            22 Friends
                                        </p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-3 col-xl-4 col-lg-5 col-md-7 col-sm-12 ">
                                <div class="card">
                                    <div class="card__header">
                                            <ul class="card__list spaceBetween">
                                                <li class="list__item row alignCenter">
                                                    <img src="./assets/avatar2.png" class="avatar avatar--round">
                                                    <span>Women</span>
                                                </li>
                                                <!-- <li class="list__item">Women</li> -->
                                                <li class="list__item">
                                                    <span class="card__meta">14h</span>
                                                </li>
                                            </ul>
                                    </div>
                                    <div class="card__img">
                                        <img src="./assets/avatar2.png">
                                    </div>
                                    <div class="card__body">
                                        <ul class="card__list spaceBetween">
                                            <li class="list__item">
                                                <i class="fa fa-comment"></i>
                                                <span>3 comments</span>
                                            </li>
                                            <li class="list__item">
                                                <i class="fa fa-heart"></i>
                                                <span>17 likes</span>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card__footer">
                                        <p class="text--grey">
                                            <span class="card__icon">
                                                <i class="far fa-heart"></i>
                                            </span>
                                            Add a comment
                                        </p>
                                    </div>
                                </div>
                            </div>

Notification Card / Action card

Elliot requested permission to view your contact details

Born and raised in central Argentina, Messi relocated to Spain to join Barcelona at age 13, for whom he made his competitive debut aged 17 in October 2004. He established himself as an integral player for the club within the next three years, and in his first uninterrupted season in 2008–09 he helped Barcelona achieve the first treble in Spanish football; that year, aged 22, Messi won his first Ballon d'Or. Three successful seasons followed, with Messi winning four consecutive Ballons d'Or, making him the first player to win the award four times and in a row

                            <div class="card col-3 col-xl-4 col-lg-5 col-md-7 col-sm-12">
                                <div class="card__header">
                                    <ul class="card__list spaceBetween">
                                        <li class="list__item">
                                            <p class="card__title">Elliot Fu</p>
                                            <p class="card__meta">Friends of Veronika</p>
                                        </li>
                                        <li class="list__item">
                                            <img src="./assets/avatar-4.png" class="avatar" alt="">
                                        </li>
                                    </ul>
                                </div>
                                <div class="card__body">
                                    Elliot requested permission to view your contact details
                                </div>
                                <div class="card__footer">
                                    <div class="row">
                                        <button class="col-6 btn btn--success btn--fluid btn--outline">Approve</button>
                                        <button class="col-6 btn btn--danger btn--fluid btn--outline">Reject</button>
                                    </div>
                                </div>
                            </div>
                            
                            
                            <div class="card col-3 col-xl-4 col-lg-5 col-md-7 col-sm-12">
                                <div class="card__header">
                                    <ul class="card__list spaceBetween">
                                        <li class="list__item">
                                            <p class="card__title">Lionel Messi</p>
                                            <p class="card__meta">GOAT of Football</p>
                                        </li>
                                        <li class="list__item">
                                            <img src="./assets/avatar-5.png" class="avatar" alt="">
                                        </li>
                                    </ul>
                                </div>
                                <div class="card__body">
                                    Born and raised in central Argentina, Messi relocated to Spain to join Barcelona at age 13, for whom he made his competitive debut aged 17 in October 2004. He established himself as an integral player for the club within the next three years, and in his first uninterrupted season in 2008–09 he helped Barcelona achieve the first treble in Spanish football; that year, aged 22, Messi won his first Ballon d'Or. Three successful seasons followed, with Messi winning four consecutive Ballons d'Or, making him the first player to win the award four times and in a row
                                </div>
                                <div class="card__footer">
                                    <div class="row">
                                        <button class="btn btn--pink btn--fluid btn--inverted">Mark as read</button>
                                    </div>
                                </div>
                            </div>

Ecommerce card

Apple

Iphone X

Rs 380

Lorem ipsum dolor sit amet consectetur, adipisic elit. Corporis exerci illum assumenda pariatur .

Goodnites Nighttime Bedwetting Underwear, Boys' S/M (43-68 lb.), 44 Ct

By GoodNites

Rs 1992

                            <div class="col-3 col-xl-4 col-lg-5 col-md-7 col-sm-12 ">
                                <div class="card">
                                    <div class="card__img">
                                        <img src="./assets/product.jpg" alt="">
                                    </div>
                                    <div class="card__body">
                                        <p class="card__meta">Apple</p>
                                        <p class="card__title">Iphone X</p>
                                        <p class="card__lead">Rs 380</p>
                                        <p class="card__description">Lorem ipsum dolor sit amet consectetur, adipisic elit. Corporis exerci illum assumenda pariatur .</p>
                                    </div>
                                </div>  
                            </div>
        
                            <div class="col-3 col-xl-4 col-lg-5 col-md-7 col-sm-12 ">
                                <div class="card">
                                    <div class="card__img">
                                        <img src="./assets/product-2.jpg" alt="">
                                    </div>
                                    <div class="card__body">
                                        
                                        <p class="card__title">Goodnites Nighttime Bedwetting Underwear, Boys' S/M (43-68 lb.), 44 Ct</p>
                                        <p class="card__meta">By GoodNites</p>
        
                                        <div class="rating__container rating--star">
                                            <label class="rating__control" for="ratingP1"></label>
                                            <input class="rating__input" type="radio" name="rating1" id="ratingP1" >
                            
                                            <label class="rating__control" for="ratingP2"></label>                
                                            <input class="rating__input" type="radio" name="rating1" id="ratingP2" >
                                            
                                            <label class="rating__control" for="ratingP3"></label>
                                            <input class="rating__input" type="radio" name="rating1" id="ratingP3">
                                            
                                            <label class="rating__control" for="ratingP4"></label>
                                            <input class="rating__input" type="radio" name="rating1" id="ratingP4" checked>
                            
                                            <label class="rating__control" for="ratingP5"></label>
                                             <input class="rating__input" type="radio" name="rating1" id="ratingP5">
                                        </div>
                                        <p class="card__lead">Rs 1992</p>
                                    </div>
                                </div>  
                            </div>

Horizontal card

Jenny Hess

Jenny is a student studying Media Management at the New School.

                            <div class="col-5 col-xl-7 col-md-9 col-sm-12">
                                <div class="card card--horizontal">
                                    <div class="card__img col-6 p-0 m-0">
                                        <img src="./assets/avatar-7.jpg" alt="">
                                    </div>
                                    <div class="card__content">
                                        <p class="card__title">Jenny Hess</p>
                                        <p class="card__description">Jenny is a student studying Media Management at the New School.</p>
                                        <button class="btn btn--purple btn--inverted btn--fluid"> 
                                            <i class="fa fa-plus"></i>
                                            Add Friend
                                        </button>
                                    </div>
                    
                                </div>
                            </div>