Introduction to Nebula UI

Nebula UI is an open source styling component cibrary, which helps Developers to use best styles and components, by using pre-defined classnames. Nebula helps you to quickly build your Dream Project.

Installation Guide

In order to introduce Nebula ui to your project, Copy the Link given below and paste it in the head tag of your html, above all other style sheets.


              

Copy
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"/>
    <link rel="stylesheet" href="https://nebulaui.netlify.app/CSS/global.css">

Text Utilities

Documentation and examples for common text utilities to control alignment, weight, and more.

Headings

All HTML headings, h1 through h6, are available.

H1 - Heading 1

H2 - Heading 2

H3 - Heading 3

H4 - Heading 4

H5 - Heading 5

H6 - Heading 6


              

Copy
    <h1>H1 - Heading 1</h1>
    <h2>H2 - Heading 2</h2>
    <h3>H3 - Heading 3</h3>
    <h4>H4 - Heading 4</h4>
    <h5>H5 - Heading 5</h5>
    <h6>H6 - Heading 6</h6>

Alignment

Use classes text-left ,text-center or text-right to center, left or right align text.

Left align

Center-align

Right Align


              

Copy
        <h3 class="text-left">Left align</h3>
        <h3 class="text-center">Center-align</h3>
        <h3 class="text-right">Right Align</h3>

Font Sizes

Use fs-1, fs-2, fs-3, fs-4, fs-5 and fs-6 to change the font size.

Font size 6

Font size 5

Font size 4

Font size 3

Font size 2

Font size 1


                

Copy
    <p class="fs-6">Font size 6</p>
    <p class="fs-5">Font size 5</p>
    <p class="fs-4">Font size 4</p>
    <p class="fs-3">Font size 3</p>
    <p class="fs-2">Font size 2</p>
    <p class="fs-1">Font size 1</p>

Font Weight

Use fw-900, fw-700, fw-600, fw-400 and fw-300 to change the font weight.

Font Weight 900

Font Weight 700

Font Weight 600

Font Weight 400

Font Weight 300


              

Copy
    <p class="fw-900">Font Weight 900</p>
    <p class="fw-700">Font Weight 700</p>
    <p class="fw-600">Font Weight 600</p>
    <p class="fw-400">Font Weight 400</p>
    <p class="fw-300">Font Weight 300</p>

Text Styles

To add strike-through on text, use text-strike class

To add a line under a text, use text-underline class

To add different text colors, use one of the classes primary-color, secondary-color, error-color, warning-color or success-color.

This text is of Primary Color

This text is of gray Color

This text is of Error Color

This text is of Warning Color

This text is of Success Color

This text has a line going through it.

This text has a line underneath it.


                

Copy
    <p class="primary-color">This text is of Primary Color </p>
    <p class="gray-text">This text is of gray Color</p>
    <p class="error-color">This text is of Error Color</p>
    <p class="warning-color">This text is of Warning Color</p>
    <p class="success-color">This text is of Success Color</p>
    <p class="text-strike">This text has a line going through it.</p>
    <p class="text-underline">This text has a line underneath it.</p>

Alert

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

Different alerts

The alert can be created by using giving class name of different alert variants.

This is an error alert — check it out!

This is a warning alert — check it out!

This is an info alert — check it out!

This is a success alert — check it out!


              

Copy
        <div class="alert alert-error">
            <span class="icon-alert"><i class="fas fa-exclamation-circle"></i></span>
            <span>This is an error alert — check it out!</span>
        </div>

        <div class="alert alert-warning">
            <span class="icon-alert"><i class="fas fa-exclamation-triangle"></i></span>
            <span>This is a warning alert — check it out!</span>
        </div>

        <div class="alert alert-info">
            <span class="icon-alert"><i class="fas fa-info-circle"></i></span>
            <span>This is an info alert — check it out!</span>
        </div>

        <div class="alert alert-success">
            <span class="icon-alert"><i class="far fa-check-circle"></i></span>
            <span>This is a success alert — check it out!</span>
        </div>

Avatar

Avatars are user profile pictures, usually found in circular shapes. It can be used to show user's profile picture on profile information page, on navigation bar, in blogs grid items.

Profile Avatar

You can use Profile Avatars by add 'avatar' class inside the img tag.


              

Copy
    <img class="avatar" src="/images/large-img.jpeg">
    <img class="avatar" src="/images/profile-image1.svg">
    <img class="avatar img-cover" src="/images/profile-image2.jpeg">

Avatar in different sizes

Size of the avatars can be changed by adding avatar-large | avatar-meduim | avatar-small class to the existing avatar class.


                

Copy
        <div><img class="avatar avatar-large" src="/images/large-img.jpeg" alt=""></div>
        <div><img class="avatar avatar-meduim" src="/images/medium.jpeg" alt=""></div>
        <div><img class="avatar avatar-small" src="/images/small.jpeg" alt=""></div>

Buttons

Buttons are also called as call to action which is important part in website. Buttons allow users to take actions, and make choices, with a single tap.

Contained Buttons

Contained buttons contain actions that are primary to your app. Contained buttons are high-emphasis, distinguished by their use. They contain actions that are primary to your app.

 
                

Copy
        <button class="btn">Default</button>
        <button class="btn btn-primary">Primary</button>
        <button class="btn btn-secondary">Secondary</button>
        <button class="btn btn-disabled">Disabled</button>

Outlined Buttons

The outline button style removes all background colors from a button and gives it a lighter look. The outline style buttons can be used for various purposes.

for example: Indicating the secondary action complementing the primary action.


              

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

Link Buttons

When mouse clicked on the button then the button acts like a link and redirect page into the given location. This is used to show a button which will work as link.


              

Copy
        <button class="btn btn-primary-link"><a href="#">Primary</a></button>
        <button class="btn btn-secondary-link"><a href="#">Secondary</a></button>

Buttons With Icon

Icons in buttons represents the specific action related to that icon. Icon buttons allow users to take actions, and make choices, with a single tap.


              

Copy
        <button class="btn btn-delete btn-secondary">
            <span class="icon-btn"><i class="far fa-trash-alt"></i></span>
            Delete
        </button>
        <button class="btn btn-primary">
            send
            <span class="icon-btn"><i class="far fa-paper-plane"></i></span>
        </button>
        <button class="btn"><span class="icon-btn"><i class="fas fa-cloud-upload-alt"></i></span>
            Upload
        </button>
        <button class="btn btn-primary">
            <span class="icon-btn"><i class="far fa-save"></i></span>
            save
        </button>

Floating Action buttons

A floating action button (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center.


              

Copy
        <button class="btn btn-primary btn-floating">
            <span class="icon-btn"><i class="fas fa-plus"></i></span>
        </button>

        <button class="btn btn-primary btn-floating">
            <span class="icon-btn"><i class="fas fa-pen"></i></span>
        </button>

        <button class="btn btn-secondary btn-delete btn-floating">
            <span class="icon-btn"><i class="far fa-trash-alt"></i></span>
        </button>

        <button class="btn btn-primary btn-floating">
            <span class="icon-btn"><i class="fas fa-arrow-up"></i></span>
        </button>

Buttons in sizes

You can make button large and small by putting class btn-small and btn-large.


              

Copy
        <button class="btn btn-primary btn-small">small</button>
        <button class="btn btn-primary btn-large">large</button>
        <button class="btn btn-secondary btn-small">small</button>
        <button class="btn btn-secondary btn-large">large</button>

Badge

Badges are being used to display a notification count or status information. Badge can be used to display numbers, online / offline status, depending on where they are used.

Profile Badge

The profile badge used to show current status of a user. status can be online, offline or DND. You can use this status by add class status-online, status-away and status-dnd.


            

Copy
        <div class="badge">
            <img class="avatar avatar-large" src="/images/large-img.jpeg" alt="">
            <span class="badge-avatar status-online"></span>
        </div>
        <div class="badge"> 
            <img class="avatar avatar-meduim" src="/images/medium.jpeg" alt="">
            <span class="badge-avatar status-away"></span>
        </div>
        <div class="badge">
            <img class="avatar avatar-small" src="/images/small.jpeg" alt="">
            <span class="badge-avatar status-dnd"></span>
        </div>

Badge on icon

Badge on icon is used to show the no. of items present in the which icon represents. You can put icon based on what you want to represent with that icon.


              

Copy
        <div class="badge-icon">
            <span class="icon-badge"><i class="fas fa-shopping-cart"></i></span>
            <span class="badge-number">2</span>
        </div>
        <div class="badge-icon">
            <span class="icon-badge"><i class="far fa-bell"></i></span>
            <span class="badge-number">2</span>
        </div>

Card

Cards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information. Card are used to show user related data collectively, like product details.

Text Card

Text card is basically have heading and discription which is used to show some information.

iPhone 13 Pro

Cricket Shoes for Mens - Lightweight, maximized Grip & Quick Actions

Rs. 1,19,900 1,19,900 10%

Lorem ipsum dolor sit amet consectetur adipisicing elit. At, earum nobis aspernatur quibusdam quisquam sunt repudiandae non mollitia vel sint.


              

Copy
    <div class="card-text">
      <span class="card-unavailable hide">Currently unavailable</span>
      <div class="horizontal-card hide-hz">
        <div class="card-horizontal-image">
          <img src="/images/cricket-bat1.jpg" alt="img" />
          <span class="badge-new hide">New</span>
          <span class="delete-icon hide">&times;</span>
        </div>
        <div class="card-details">
          <div class="card-item">
            <h1 class="card-product-name">iPhone 13 Pro</h1>
            <span class="icon-card icon-heart"><i class="fas fa-heart"></i></span>
          </div>
          <div class="card-brief-detail">
            <p>
              Cricket Shoes for Mens - Lightweight, maximized Grip & Quick
              Actions
            </p>
          </div>
          <div class="card-price">
            Rs.
            <span class="price">1,19,900</span>
            <span class="price text-strike-over">1,19,900</span>
            <span class="price text-discount">10%</span>
          </div>
          <div class="card-btn">
            <button class="btn-card btn-primary-card">
              <span class="icon-card"><i class="fas fa-shopping-cart"></i></span>
              Add to Cart
            </button>
            <button class="btn-card btn-primary-card-outline">
              <span class="icon-card"><i class="fas fa-shopping-cart"></i></span>
              Add to Wishlist
            </button>
          </div>
        </div>
      </div>

      <div class="card-text-only">
        <div class="header">
          <h1 class="heading">Heading</h1>
        </div>
        <div class="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. At, earum
          nobis aspernatur quibusdam quisquam sunt repudiandae non mollitia vel
          sint.
        </div>
      </div>
    </div>

Horizontal Card

A card in which contents are placed in horizontal direction.

Samsung Galaxy S21 5G

(Phantom Violet, 8GB, 128GB Storage) with No Cost EMI/Additional Exchange Offers

Rs. 59,990 Rs.83,999 29%


              

Copy
    <div class="card-horizontal-wrapper">
      <span class="card-unavailable hide">Currently unavailable</span>
      <div class="horizontal-card">
        <div class="card-horizontal-image">
          <img class="img-cards" src="/images/samsungs215g.jpeg" alt="img" />
          <span class="badge-new hide">New</span>
          <span class="delete-icon hide">&times;</span>
        </div>
        <div class="card-details">
          <div class="card-item">
            <h1 class="card-product-name">Samsung Galaxy S21 5G</h1>
            <span class="icon-card icon-heart"><i class="fas fa-heart"></i></span>
          </div>
          <div class="card-brief-detail">
            <p>
              (Phantom Violet, 8GB, 128GB Storage) with No Cost EMI/Additional
              Exchange Offers
            </p>
          </div>
          <div class="card-price">
            Rs.
            <span class="price">59,990</span>
            <span class="price text-strike-over">Rs.83,999</span>
            <span class="price text-discount">29%</span>
          </div>
          <div class="card-btn">
            <button class="btn-card btn-primary-card">
              <span class="icon-card"><i class="fas fa-shopping-cart"></i></span>
              Add to Cart
            </button>
            <button class="btn-card btn-wishlist">
              <span class="icon-card"><i class="fas fa-shopping-cart"></i></span>
              Add to Wishlist
            </button>
          </div>
        </div>
      </div>

      <div class="card-text-only hide">
        <div class="header">
          <h1 class="heading">Heading</h1>
        </div>
        <div class="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. At, earum
          nobis aspernatur quibusdam quisquam sunt repudiandae non mollitia vel
          sint.
        </div>
      </div>
    </div>

Vertical Card

A card in which contents are placed in horizontal direction.

iPhone 13 Pro

Sierra Blue

Rs. 1,19,900 Rs.1,20,900 10%


              

Copy
    <div class="card-wrapper">
      <span class="card-unavailable hide">Currently unavailable</span>
      <div class="card">
        <div class="card-image">
          <img class="img-cards" src="/images/iphone13pro.jpeg" alt="img" />
          <span class="badge-new hide">New</span>
          <span class="delete-icon hide">&times;</span>
        </div>
        <div class="card-details">
          <div class="card-item">
            <h1 class="card-product-name">iPhone 13 Pro</h1>
            <span class="icon-card icon-heart"><i class="fas fa-heart"></i></span>
          </div>
          <div class="card-brief-detail">
            <p>Sierra Blue</p>
          </div>
          <div class="card-price">
            Rs.
            <span class="price">1,19,900</span>
            <span class="price text-strike-over">Rs.1,20,900</span>
            <span class="price text-discount">10%</span>
          </div>
          <div class="card-btn">
            <button class="btn-card btn-primary-card">
              <span class="icon-card"><i class="fas fa-shopping-cart"></i></span>
              Add to Cart
            </button>
            <button class="btn-card btn-primary-card-outline hide">
              <span class="icon-card"><i class="fas fa-shoping-cart"></i></span>
              Add to Wishlist
            </button>
          </div>
        </div>
      </div>

      <div class="card-text-only hide">
        <div class="header">
          <h1 class="heading">Heading</h1>
        </div>
        <div class="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. At, earum
          nobis aspernatur quibusdam quisquam sunt repudiandae non mollitia vel
          sint.
        </div>
      </div>
    </div>

Card with badge

A card have badge on it which describes status of product e.g. new, best value etc.

New

iPhone 13 Pro

Sierra Blue

Rs. 1,19,900 Rs.1,20,900 10%


              

Copy
    <div class="card-wrapper">
      <span class="card-unavailable hide">Currently unavailable</span>
      <div class="card">
        <div class="card-image">
          <img class="img-cards" src="/images/iphone13pro.jpeg" alt="img" />
          <span class="badge-new">New</span>
        </div>
        <div class="card-details">
          <div class="card-item">
            <h1 class="card-product-name">iPhone 13 Pro</h1>
            <span class="icon-card icon-heart"><i class="fas fa-heart"></i></span>
          </div>
          <div class="card-brief-detail">
            <p>Sierra Blue</p>
          </div>
          <div class="card-price">
            Rs.
            <span class="price">1,19,900</span>
            <span class="price text-strike-over">Rs.1,20,900</span>
            <span class="price text-discount">10%</span>
          </div>
          <div class="card-btn">
            <button class="btn-card btn-primary-card">
              <span class="icon-card"><i class="fas fa-shopping-cart"></i></span>
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <div class="card-text-only hide">
        <div class="header">
          <h1 class="heading">Heading</h1>
        </div>
        <div class="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. At, earum
          nobis aspernatur quibusdam quisquam sunt repudiandae non mollitia vel
          sint.
        </div>
      </div>
    </div>

Card with dismiss

A card have dismiss button on it so we can cancle that card.

New ×

iPhone 13 Pro

Sierra Blue

Rs. 1,19,900 1,20,900 10%


            

Copy
    <div class="card-wrapper js-dismiss">
      <span class="card-unavailable hide">Currently unavailable</span>
      <div class="card">
        <div class="card-image">
          <img class="img-cards" src="/images/iphone13pro.jpeg" alt="img" />
          <span class="badge-new">New</span>
          <span class="delete-icon">&times;</span>
        </div>
        <div class="card-details">
          <div class="card-item">
            <h1 class="card-product-name">iPhone 13 Pro</h1>
            <span class="icon-card icon-heart"><i class="fas fa-heart"></i></span>
          </div>
          <div class="card-brief-detail">
            <p>Sierra Blue</p>
          </div>
          <div class="card-price">
            Rs.
            <span class="price">1,19,900</span>
            <span class="price text-strike-over">1,20,900</span>
            <span class="price text-discount">10%</span>
          </div>
          <div class="card-btn">
            <button class="btn-card btn-primary-card-outline">
              <span class="icon-card"><i class="fas fa-shopping-cart"></i></span>
              Add to Cart
            </button>
            <button class="btn-card btn-primary-card-outline hide">
              <span class="icon-card"><i class="fas fa-shopping-cart"></i></span>
              Add to Wishlist
            </button>
          </div>
        </div>
      </div>

      <div class="card-text-only hide">
        <div class="header">
          <h1 class="heading">Heading</h1>
        </div>
        <div class="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. At, earum
          nobis aspernatur quibusdam quisquam sunt repudiandae non mollitia vel
          sint.
        </div>
      </div>
    </div>

Text overlay Card

A card have text overlay on it to show status of availibility of product.

Currently unavailable

iPhone 13 Pro

Sierra Blue

Rs. 1,19,900 1,20,900 10%


              

Copy
    <div class="card-wrapper card-text-overlay-wrapper">
      <span class="card-unavailable">Currently unavailable</span>
      <div class="card card-opacity">
        <div class="card-image">
          <img class="img-cards" src="/images/iphone13pro.jpeg" alt="img" />
          <span class="badge-new hide">New</span>
          <span class="delete-icon hide">&times;</span>
        </div>
        <div class="card-details">
          <div class="card-item">
            <h1 class="card-product-name">iPhone 13 Pro</h1>
            <span class="icon-card icon-heart"><i class="fas fa-heart"></i></span>
          </div>
          <div class="card-brief-detail">
            <p>Sierra Blue</p>
          </div>
          <div class="card-price">
            Rs.
            <span class="price">1,19,900</span>
            <span class="price text-strike-over">1,20,900</span>
            <span class="price text-discount">10%</span>
          </div>
          <div class="card-btn">
            <button class="btn-card btn-primary-card">
              <span class="icon-card"><i class="fas fa-shopping-cart"></i></span>
              Add to Cart
            </button>
            <button class="btn-card btn-primary-card-outline hide">
              <span class="icon"><i class="fas fa-shoping-cart"></i></span>
              Add to Wishlist
            </button>
          </div>
        </div>
      </div>

      <div class="card-text-only hide">
        <div class="header">
          <h1 class="heading">Heading</h1>
        </div>
        <div class="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. At, earum
          nobis aspernatur quibusdam quisquam sunt repudiandae non mollitia vel
          sint.
        </div>
      </div>
    </div>

Card with shadow

A card have shadow effect around it.

iPhone 13 Pro

Sierra Blue

Rs. 1,19,900 1,20,900 10%


            

Copy
      <div class="card-wrapper shadow-1">
        <span class="card-unavailable hide">Currently unavailable</span>
        <div class="card">
          <div class="card-image">
            <img class="img-cards" src="/images/iphone13pro.jpeg" alt="img" />
            <span class="badge-new hide">New</span>
            <span class="delete-icon hide">&times;</span>
          </div>
          <div class="card-details">
            <div class="card-item">
              <h1 class="card-product-name">iPhone 13 Pro</h1>
              <span class="icon-card icon-heart"><i class="fas fa-heart"></i></span>
            </div>
            <div class="card-brief-detail">
              <p>Sierra Blue</p>
            </div>
            <div class="card-price">
              Rs.
              <span class="price">1,19,900</span>
              <span class="price text-strike-over">1,20,900</span>
              <span class="price text-discount">10%</span>
            </div>
            <div class="card-btn">
              <button class="btn-card btn-primary-card">
                <span class="icon-card"><i class="fas fa-shopping-cart"></i></span>
                Add to Cart
              </button>
              <button class="btn-card btn-primary-card-outline hide">
                <span class="icon-card"><i class="fas fa-shoping-cart"></i></span>
                Add to Wishlist
              </button>
            </div>
          </div>
        </div>

        <div class="card-text-only hide">
          <div class="header">
            <h1 class="heading">Heading</h1>
          </div>
          <div class="text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. At, earum
            nobis aspernatur quibusdam quisquam sunt repudiandae non mollitia
            vel sint.
          </div>
        </div>
      </div>

Image

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

Responsive Image

Responsive Image Components are used to dsiplay Images on websites, which are screen responsive. They expand upto the width of the container they are in. You can make image responsive just by putting class name img-responsive in image.


              

Copy
    <div class="img-wrapper">
        <img class="img-responsive" src="https://picsum.photos/250/250" alt="Responsive Image">
    </div>

Rounded corner Image

You can make rounded corner image by putting class name rounded-corner-img in image.


              

Copy
    <div class="img-wrapper">
        <img src="https://picsum.photos/250/250" class="rounded-corner-img img-responsive " alt="Responsive image">
    </div>

Round Image

You can make your image round by add class round-img in image.


              

Copy
    <div class="img-wrapper">
        <img src="https://picsum.photos/200/200" class="round-img img-responsive" alt="Responsive image">
    </div>

Input

Inputs are necessary for user interaction with the website. Inputs are used to take information from the user, and then save the data to the server, accordingly.

Simple Input

Simple Input has a label present at the top of the input field.

Label


              

Copy
    <div class="simple-input">
      <label class="label" for="input-text">Label</label>
      <input class="input-width" type="text" name="input" />
    </div>

Error Input

Error input can be used to show error message and change the color accordingly.

Label

Wrong Password. Try again.


              

Copy
    <div class="error-input">
      <label class="label" for="input-error">Label</label>
      <input type="text" class="err input-width"/>
      <div class="error-message">Wrong Password. Try again.</div>
    </div>

Success Input

Success input can be used to show success message and change the color accordingly.

Label

This is success message


            

Copy
    <div class="success-input">
        <label class="label" for="input-success">Label</label>
        <input type="text" class="success input-width"/>
        <div class="success-message">This is success message</div>
    </div>

Rating

Rating is used for taking reviews from users and show review on products in a website.

Number Rating

Number rating shows rating or review counts of products.

4.2

(2,515)


              

Copy
    <div class="rating-wrapper margin-bottom">
        <section class="number-rating">
            <span class="rat-num">4.2</span>
            <span class="rat-icon"><i class="fas fa-star"></i></span>
        </section>
        <span class="rat-count">(2,515)</span>
    </div>

Read only Rating

You can show ratings as stars. use class rat-active to make perticular star colorized.

(2,515)


            

Copy
    <div class="rating-wrapper">
        <section class="rat-star-icons">
            <span class="rat-active"><i class="fas fa-star"></i></span>
            <span class="rat-active"><i class="fas fa-star"></i></span>
            <span class="rat-active"><i class="fas fa-star"></i></span>
            <span class="rat-active"><i class="fas fa-star"></i></span>
            <span><i class="fas fa-star"></i></span>
        </section>
        <span class="rat-count">(2,515)</span>
    </div>

List

Lists can be used at so many places, navigation bar, stacked notifications, article pages, etc.

Unordered list

You can add list-style-square and list-style-circle to make bullets sqaure and circle in list.

list item1
list item2
list item3

list item1
list item2
list item3

list item1
list item2
list item3


            

Copy
        <ul class="style-list"> 
            <li>list item1</li>
            <li>list item2</li>
            <li>list item3</li>
        </ul>

        <ul class="style-list list-style-square"> 
            <li>list item1</li>
            <li>list item2</li>
            <li>list item3</li>
        </ul>

        <ul class="style-list list-style-circle"> 
            <li>list item1</li>
            <li>list item2</li>
            <li>list item3</li>
        </ul>

Ordered list

Add class according to bullets. You can add li-lower_roman, li-upper_roman, li-upper_alpha and li-lower_alpha accordingly.

List item with numbers
List item with numbers
List item with numbers

List item with lower roamn
List item with lower roamn
List item with lower roamn

List item with upper roamn
List item with upper roamn
List item with upper roamn

List item with upper alphabet
List item with upper alphabet
List item with upper alphabet

List item with upper alphabet
List item with upper alphabet
List item with upper alphabet


              

Copy
        <ol class="style-list">
            <li>List item with numbers</li>
            <li>List item with numbers</li>
            <li>List item with numbers</li>
        </ol>

        <ol class="style-list li-lower_roman">
            <li>List item with lower roamn</li>
            <li>List item with lower roamn</li>
            <li>List item with lower roamn</li>
        </ol>

        <ol class="style-list li-upper_roman">
            <li>List item with upper roamn</li>
            <li>List item with upper roamn</li>
            <li>List item with upper roamn</li>
        </ol>

        <ol class="style-list li-upper_alpha ">
            <li>List item with upper alphabet</li>
            <li>List item with upper alphabet</li>
            <li>List item with upper alphabet</li>
        </ol>

        <ol class="style-list li-lower_alpha ">
            <li>List item with upper alphabet</li>
            <li>List item with upper alphabet</li>
            <li>List item with upper alphabet</li>
        </ol>

Stacked List

We can use stacked list in notifications.

Notification 1
Notification 2
Notification 3
Notification 4


            

Copy
        <ul class="stacked-list">
            <li class="li-stacked">Notification 1</li>
            <li class="li-stacked">Notification 2</li>
            <li class="li-stacked">Notification 3</li>
            <li class="li-stacked">Notification 4</li>
        </ul>

Select List Groups

Select List groups contains items with checkboxes. They are useful for refining the products search on an eCommerce website.

Apple Redmi Samsung


            

Copy
    <div class="list-group">
        <label for="Apple">
            <input id="Apple" name="checkbox" type="checkbox" checked>
            Apple
        </label>
        <label for="Redmi">
            <input id="Redmi" name="checkbox" type="checkbox">
            Redmi 
        </label>
        <label for="Samsung">
            <input id="Samsung" name="checkbox" type="checkbox">
            Samsung
        </label>
    </div>

Navigation

A navigation bar allows you the opportunity to prioritise the content you want visitors to read.

Standard

This is standard navigation bar where you can se hamburger menu and some action icons.


            
    
      
        
  
    
    

        


  


  
        
          
          <div class="navbars-container">
        
        
          
            <header class="header-navs">
        
        
          
              <div class="menu-container">
        
        
          
                <div class="menu-bar">
        
        
          
                  <i class="fas fa-bars"></i>
        
        
          
                </div>
        
        
          
                <div class="text">San Francisco</div>
        
        
          
              </div>
        
        
          
              <div class="items">
        
        
          
                <i class="fas fa-download"></i>
        
        
          
                <i class="fas fa-print"></i>
        
        
          
                <i class="fas fa-bookmark"></i>
        
        
          
              </div>
        
        
          
            </header>
        
        
          
          </div>
        
  



    

  


      
      
        view raw
        
          navbar.html
        
        hosted with ❤ by GitHub

Only Heading

This navigation menu have only heading and hamburger menu option.


              
    
      
        
  
    
    

        


  


  
        
          
          <div class="navbars-container">
        
        
          
            <header class="header-navs header-short">
        
        
          
              <div class="menu-container">
        
        
          
                <div class="menu-bar">
        
        
          
                  <i class="fas fa-bars"></i>
        
        
          
                </div>
        
        
          
                <div class="text">San Francisco</div>
        
        
          
              </div>
        
        
          
            </header>
        
        
          
          </div>
        
  



    

  


      
      
        view raw
        
          onlyHeadingNavbar.html
        
        hosted with ❤ by GitHub

Prominent

This navbar have prominent heading with some margin in top.

San Francisco


            
    
      
        
  
    
    

        


  


  
        
          
          <div class="navbars-container">
        
        
          
            <header class="header-navs header-prominent">
        
        
          
              <div class="menu-bar">
        
        
          
                <i class="fas fa-bars"></i>
        
        
          
              </div>
        
        
          
              <div class="text text-prominent">San Francisco</div>
        
        
          
          

        
        
          
              <div class="items">
        
        
          
                <i class="fas fa-bookmark"></i>
        
        
          
                <i class="fas fa-print"></i>
        
        
          
                <i class="fas fa-bookmark"></i>
        
        
          
              </div>
        
        
          
            </header>
        
        
          
          </div>
        
  



    

  


      
      
        view raw
        
          prominentNav.html
        
        hosted with ❤ by GitHub

Prominent And Dence

This navbar have prominent heading with some small margin in top.

San Francisco


              
    
      
        
  
    
    

        


  


  
        
          
          <div class="navbars-container">
        
        
          
            <header class="header-navs header-prominent-dense">
        
        
          
              <div class="menu-bar">
        
        
          
                <i class="fas fa-bars"></i>
        
        
          
              </div>
        
        
          
              <div class="text text-prominent">San Francisco</div>
        
        
          
          

        
        
          
              <div class="items">
        
        
          
                <i class="fas fa-bookmark"></i>
        
        
          
                <i class="fas fa-print"></i>
        
        
          
                <i class="fas fa-bookmark"></i>
        
        
          
              </div>
        
        
          
            </header>
        
        
          
          </div>
        
  



    

  


      
      
        view raw
        
          prominentDenceNav.html
        
        hosted with ❤ by GitHub

Navbar with input

This navbar have input element for searching purpose.


              
    
      
        
  
    
    

        


  


  
        
          
          <div class="navbars-container">
        
        
          
            <header class="header-navs">
        
        
          
              <div class="menu-container">
        
        
          
                <div class="menu-bar">
        
        
          
                  <i class="fas fa-bars"></i>
        
        
          
                </div>
        
        
          
                <div class="text">San Francisco</div>
        
        
          
              </div>
        
        
          
              <div class="items">
        
        
          
                <input class="input-for-nav" type="text" placeholder="Search..." />
        
        
          
                <i class="fas fa-download"></i>
        
        
          
                <i class="fas fa-print"></i>
        
        
          
                <i class="fas fa-bookmark"></i>
        
        
          
              </div>
        
        
          
            </header>
        
        
          
          </div>
        
  



    

  


      
      
        view raw
        
          navbarWithInput.html
        
        hosted with ❤ by GitHub

Toast

The toast displays an unobtrusive and non-block popup box to send informational messages to your web users.

Successfully logged in

Oops! password is too weak

Sorry! Email is not registered yet


              
    
      
        
  
    
    

        


  


  
        
          
          <div class="toast-container toast-success">
        
        
          
            <p class="toast-description" >Successfully logged in</p>
        
        
          
            <span class="toast-cancle-icon" >&times;</span>
        
        
          
          </div>
        
        
          
          

        
        
          
          <div class="toast-container toast-warning">
        
        
          
            <p class="toast-description" >Oops! password is too weak</p>
        
        
          
            <span class="toast-cancle-icon" >&times;</span>
        
        
          
          </div>
        
        
          
          

        
        
          
          <div class="toast-container toast-danger">
        
        
          
            <p class="toast-description" >Sorry! Email is not registered yet</p>
        
        
          
            <span class="toast-cancle-icon" >&times;</span>
        
        
          
          </div>
        
  



    

  


      
      
        view raw
        
          toast.html
        
        hosted with ❤ by GitHub

Grid

CSS Grid Layout excels at dividing a page into major regions or devide perticular boxes into columns and rows.

Grid 2 items

Grid can be used to devide total width into evenly two parts.

iPhone 13 Pro

Sierra Blue

Rs. 1,19,900 1,20,900 10%

iPhone 13 Pro

Sierra Blue

Rs. 1,19,900 1,20,900 10%


              
    
      
        
  
    
    

        


  


  
        
          
          <div class="grid-2-item-container">
        
        
          
            //item 1 code
        
        
          
            //item 2 code
        
        
          
          </div>
        
  



    

  


      
      
        view raw
        
          gridTwoItems.html
        
        hosted with ❤ by GitHub

Grid 3 items

Grid can be used to devide total width into evenly three parts.

iPhone 13 Pro

Sierra Blue

Rs. 1,19,900 1,20,900 10%

iPhone 13 Pro

Sierra Blue

Rs. 1,19,900 1,20,900 10%

iPhone 13 Pro

Sierra Blue

Rs. 1,19,900 1,20,900 10%


            
    
      
        
  
    
    

        


  


  
        
          
          <div class="grid-3-item-container">
        
        
          
            //item 1 code
        
        
          
            //item 2 code
        
        
          
            //item 3 code
        
        
          
          </div>
        
  



    

  


      
      
        view raw
        
          gridThreeItem.html
        
        hosted with ❤ by GitHub

	<div class="modal-container">
	<div class="modal-title-box">
	<h2 class="margin-evenly" >Modal Title</h2>
	<span class="modal-cancle-icon margin-evenly" >×</span>
	</div>
	<p class="model-content margin-evenly">Modal body text goes here.</p>
	<div class="control-buttons-container">
	<button class="modal-btn-cancle">Cancle</button>
	<button class="modal-btn-save" >Save Changes</button>
	</div>
	</div>

	<div class="navbars-container">
	<header class="header-navs">
	<div class="menu-container">
	<div class="menu-bar">
	<i class="fas fa-bars"></i>
	</div>
	<div class="text">San Francisco</div>
	</div>
	<div class="items">
	<i class="fas fa-download"></i>
	<i class="fas fa-print"></i>
	<i class="fas fa-bookmark"></i>
	</div>
	</header>
	</div>

	<div class="navbars-container">
	<header class="header-navs header-short">
	<div class="menu-container">
	<div class="menu-bar">
	<i class="fas fa-bars"></i>
	</div>
	<div class="text">San Francisco</div>
	</div>
	</header>
	</div>

	<div class="navbars-container">
	<header class="header-navs header-prominent">
	<div class="menu-bar">
	<i class="fas fa-bars"></i>
	</div>
	<div class="text text-prominent">San Francisco</div>

	<div class="items">
	<i class="fas fa-bookmark"></i>
	<i class="fas fa-print"></i>
	<i class="fas fa-bookmark"></i>
	</div>
	</header>
	</div>

	<div class="toast-container toast-success">
	<p class="toast-description" >Successfully logged in</p>
	<span class="toast-cancle-icon" >×</span>
	</div>

	<div class="toast-container toast-warning">
	<p class="toast-description" >Oops! password is too weak</p>
	<span class="toast-cancle-icon" >×</span>
	</div>

	<div class="toast-container toast-danger">
	<p class="toast-description" >Sorry! Email is not registered yet</p>
	<span class="toast-cancle-icon" >×</span>
	</div>

	<div class="grid-2-item-container">
	//item 1 code
	//item 2 code
	</div>

	<div class="grid-3-item-container">
	//item 1 code
	//item 2 code
	//item 3 code
	</div>

H1 - Heading 1

H2 - Heading 2

H3 - Heading 3

H4 - Heading 4

H5 - Heading 5

H6 - Heading 6

Left align

Center-align

Right Align

iPhone 13 Pro

Heading

Samsung Galaxy S21 5G

Heading

iPhone 13 Pro

Heading

iPhone 13 Pro

Heading

iPhone 13 Pro

Heading

iPhone 13 Pro

Heading

iPhone 13 Pro

Heading

Modal Title

iPhone 13 Pro

Heading

iPhone 13 Pro

Heading

iPhone 13 Pro

Heading

iPhone 13 Pro

Heading

iPhone 13 Pro

Heading