BreezeUI

Alerts

Alerts are notifications that keeps the user informed of the status of the system, which may or may not require the user to respond. This includes general updates, errors, and warnings.

Primary Alert

A primary alert example.

Secondary Alert

A seconday alert example.

Success Alert

A success alert example.

Danger Alert

A danger alert example.

Warning Alert

A warning alert example.

Alert with cancel button

An alert example with cancel button.

Avatar

Avatar can be used to show user's profile picture on profile information page.

Image Avatar

cat profile image cat profile image cat profile image cat profile image cat profile image cat profile image

Different Sized Avatars

cat profile image cat profile image cat profile image cat profile image cat profile image

Text Avatars

SS
SS
SS
SS
SS

Badge

Badges are used to dispaly status information or count notification on top of other UI elements like avatars, icons and also text.

Status Badge

cat profile image
cat profile image
cat profile image
cat profile image

Count Badge

7
4
3

Button

Buttons are important UI elements that make it possible for users to interact with a system and take action by making selections. Buttons are used on forms, website homepages, dialog boxes, and toolbars.

Solid Primary Button

Outlined Secondary Button

Link Button

Icon Button

Floating Action Button

Card

Cards can be defined as a small rectangle/square associated to a singular thought. Cards are full of interactive elements such as text, links, buttons or images but they suggest just one main action: the one of "clicking" through the card to further discover the content.

Vertical Card

hanging sloth planter Hanging Sloth Planter ₹1500

Horizontal Card

hanging sloth planter

Hanging Sloth Planter

₹1500 ₹3000 50% off

Card with Badge

hanging sloth planter New Hanging Sloth Planter ₹1500

Card with Dismiss Button

hanging sloth planter Hanging Sloth Planter ₹1500

Card with Shadow

hanging sloth planter Hanging Sloth Planter ₹1500

Card with Overlay

hanging sloth planter Hanging Sloth Planter ₹1500

Out of Stock

Text only Card

Text only card example

This is an example of card with only text and nothing else. After this line there will be loreum ipsum text placed to fill up the remaining space.

Images

Images are multimedia elements added to make websites more interesting. The images can be formatted to have round and square borders. Responsive images can also be created which automatically adapt to the width of the container.

Round Image

Square Image

Responsive Image

Input

Input elements are used to take infromation from user. Input components are used in a variety of usecases like forms, sign-up/sign-in pages etc.

Primary Input

Secondary Input

Valid Input

This is a valid password.

Invalid Input

This is an invalid password.

Text

Text content can be styled using classes from the component library as follows.

Heading Texts

Heading Texts can be creating by applying the classes : h1, h2, h3, h4, h5, h6 .
h1 sized text. h2 sized text. h3 sized text. h4 sized text. h5 sized text. h6 sized text.

Paragraph Texts

Different sized paragraph texts can be created using the classes : p-lg, p-md, p-sm, p-xs .

A large sized paragraph text.

A medium sized paragraph text.

A small sized paragraph text.

A extra small sized paragraph text.

Aligned Text

Text can be aligned using the classes : txt-left, txt-center, txt-right.

Left aligned text.

Center aligned text.

Right aligned text.

Styled Texts

The following are examples of various styles that can be applied to text such as highlight, grey text, strikethrough, bold etc.

This is a highlighted text .

This has linethough style.

This is a bold text.

This is text in italics style.

This is a text in grey color.

Lists

Lists are used to specify a collection of information. All lists may contain one or more list elements. Lists can be of ordered or unordered type.

Unordered Lists

Unordered lists can have different bullet styles like - disc, circle, square
  • item 1
  • item 2
  • item 3
  • item 1
  • item 2
  • item 3
  • item 1
  • item 2
  • item 3

Ordered Lists

Ordered lists can be listed with the help of numbers, alphabets, roman numerals, reverse order too.
  1. list item with number
  2. list item with number
  3. list item with number
  1. list item with alphabets
  2. list item with alphabets
  3. list item with alphabets
  1. list item with roman
  2. list item with roman
  3. list item with roman
  1. list item with alphabets
  2. list item with alphabets
  3. list item with alphabets
  1. list item with roman
  2. list item with roman
  3. list item with roman
  1. reversed list item
  2. reversed list item
  3. reversed list item

Stacked Lists

Stacked lists come in handy when notifications need to be shown. The content of the notification can be placed within the li.

Rating

Ratings are web components that are used to measure how good a product/service is. Ratings are renowned for representing the credibility and quality of the product. They are used to take in user feedback and appreciation.

Read-only Rating

This kind of rating is used to display the total rating in a static manner.

Interactive Rating

This kind of rating can be used to capture user rating in real-time.

Toast

It is a UI feature where an event causes a small text box to appear at the bottom of the screen. The behavior seems like a piece of bread emerging from a toaster, thus the name.

Example of Toast

There are three types of toast - information, error and success toasts. They can be created by wrapping them within toast-info, toast-error, toast-success classes.

Toast Message. Toast Message. Toast Message.
This is a sample toast message. This message will disappear in 3 seconds.

Demo

Javascript

Grid

Grid layout enables us to align elements into columns and rows. It excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

Grids with two columns.

This kind of grid can be created by wrapping the elements within grid-container and two-col-grid class.
image of a dog
image of a dog

Grids with two rows.

This kind of grid can be created by wrapping the elements within grid-container and two-row-grid class.
man with dog

Man & Dog

This is a picture of a man and his dog.

Grids with three columns.

This kind of grid can be created by wrapping the elements within grid-container and three-col-grid class.
image of a dog
image of a dog
image of a dog

Slider

The slider component allows you to create a slider that can be used to for cases where the user can drag it to pick a number from a range that is specified. Sliders are useful when you don't need an exact numeric value.

Slider

Disabled Slider

Slider with Icon