Install Blossom UI

Copy and paste the code in the head tag of your html document. So that you can style your components by just adding class names to your html elements.

Utility Classes

Use these utilities class for making your work easy there are 150+ classes. The gold of the component libray.

Avatar

Avatar can be used to show user's profile picture on profile page, on navigation bar, on user login info.

Example of Image Avatar

Avatar is available in 4 different sizes. You can use image in Avatar. Copy paste the below code of your desired size avatar.

Alert

Alert can be used to show alter messages such as warnings, success, danger alerts etc.

Example of Alert

Alert is available in 5 different categories. Copy paste the below code of any Alert.

A primary alert example with a text link. Text Link

A secondary alert example.

A success alert example. Successfully add to cart.

A danger alert example: Are you sure you want to delete this item permanently?

A warning alert example: Your wish list is full! Delete some items to add more.

Badge

Badge can be used to show notification, in icon user-profile, no. of items in cart wishlist etc.

Example of badge

Different kinds of Badges are available. Copy paste the below code of any badge and use it in your own code.

Button

Button can be used to show onclick functionality.

Example of Standard Button

Copy paste the below code of any Button and use it. Also you can change the background color to bg-success , bg-warning, bg-info for respective types of button.

Example of Outline Button

Copy paste the below code of any Button and use it.

Example of Icon and link Button

Copy paste the below code of any Button and just replace the `link` with your link.

Example of floating Button

Copy paste the below code of floating Button and use it in your own ui.

Cards

Cards can be used to show display products.

Example of Horizontal card

Copy paste the below code of Horizontal Card and use it.

Content Heading

this is the body of content

READ BOOKMARK

Example of Vertical Card

Copy paste the below code of Vertical Card and use it.

Content Heading

Sub Heading

This is the content paragraph. This is the content paragraph.

Content Heading

Sub Heading

This is the content paragraph.

Rs.999 Rs.109910%

Example of card with text overlay and badge

Copy paste the below code of any Cards and just replace the image `link` with your link.

Content Heading

Sub Heading

This is the content paragraph.

Rs.999 Rs.109910%

Out Of Stock

Content Heading

Sub Heading

This is the content paragraph.

Rs.999 Rs.109910%

New Item

Example of Ecom Card

Copy paste the below code of Ecom Card with hover effect and use it.

title of product

Description of product

$50 4 stars

Image

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

Example of Responsive Image

Copy paste the below code and replace the img url with your image url.

Inputs

Inputs can be multiple ways text only input, number, password inputs.

Example of Inputs

Copy paste the below code and use in your project.

wrong password

Text Utilities

There are six type of heading starting from h1 to h6

Example of Text Utilities

Copy the below code of respective heading styles to use.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Example of Small and Gray Text

Copy the below code of respective heading styles to use.

Small Text

Gray Text

Center Text

Lists

There are diffrent types of list, orderd, unordered, non-bullets.

Example of List

Copy the below code of respective List styles to use.

Item One
Item Two
Item Three
Item Four

Item One
Item Two
Item Three
Item Four

Item One
Item Two
Item Three
Item Four

Example of Stacked list

Copy the below code of stacked list and use in your own code.

Content Heading
this is the body of content

READ BOOKMARK
Content Heading
this is the body of content

READ BOOKMARK

Navbars

Navbar are used in top of the page.

Example of Navbar

Copy the below code of Navbar and use in your project.

San Francisco, CA

Example of Responsive Transparent Navbar

Copy the below html and js code of Responsive Navbar with hamburger and use in your project.

JS code link of navgation with hamburger

Modals

Modal are used in show pop-up cards and alerts.

Example of Modal

Copy the html and js code of Modal and use in your project.

Alert modal demo

Simple modal demo

JS code link of alert modal

HTML code link of simple alert

JS code link of simple alert

Rating

Rating are used in giving rating to any product or feeback.

Example of Rating

Copy the html and js code of Rating and use in your project.

Toast

Toast are used in giving popup messages like error succes.

Example of Toast

Copy the html and js code of Toast and use in your project.

Succes toast demo

Error toast demo

Order placed!

Error Order not placed!

Grid

Grid are used in giving Grid to any product or feeback.

Example of Grid

Copy the html and js code of Grid and use in your project. (Grids dose not have any background color as defaut extrenal classes are used to provide background color)

Example of Grid

Copy the html and js code of Grid and use in your project. (Grids dose not have any background color as defaut extrenal classes are used to provide background color)

Slider

Slider are used to get range inputs.

Example of Slider

Copy the html code of Slider and use in your project.