Alerts

Alerts are used to attract user's attention for important information without interrupting the user's flow.

Alert with text, link and icon.

There are five types of alert: primary, secondary, success, warning and error. Refer below and use the respective classes to get the desired alert.

Alert Dismiss.

Alert can have cross icon to close the alert. Check out html and vanilla JS code below.

---

Avatar

Avatar can be used to show user's profile picture on profile information page, on navigation bar, in blogs grid items etc.

Avatar with Image

Avatar have four sizes: x-small, small, medium and large respectively. You also need to add Responsive Image class names for img element.

Refer to code snippet to get the desired avatar size.

Avatar with Text

If profile photo is not provided, then Text avatar is used to show users initials on profile page.

Just like avatar, text avatar have four sizes: x-small, small, medium, large.

---

Badge

Badges are generally used to display status information or notifications count.

Badge on Avatar

Below examples show the Badges on Avatar for displaying status information.

Badge on Icons

Below examples show the Badges on Icons for displaying notifications count information.

---

Buttons

Buttons allow user's to perform multiple actions on a website, from triggering actions to accessing different parts of a website.

They are also called as CTA- Call to Action.

Primary & link Button

There are three types of button primary solid, outline and simple link button. To use desired buttons, refer the code below.

Icon Button

You can use icon with button as follows

Floating Action Button

Floating action button is fixed to screen to perform some function like create a post, scroll to top etc.

---

Cards Component

Cards contain content and actions about a single subject.

Cards with badges & dismiss

Below cards are in vertical aligment, they consists of badges like 'Best Seller', 'New' and Dismiss Button.

Cards with text overlay & Text Only Card

The below cards have text overlay effect which is used for showing the product sold out & and text only card without any image.

Horizontal Cards

The below cards are in horizontal format.

---

Images

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

Responsive Image

You can add class 'img-responsive' to make image responsive.

Round Image

You can have round image using 'img-round' class & use class 'img-lg' for large size, 'img-xlg' for x-large size

---

Form: Input Components with Error Validation

Inputs are used to get the Valid data from User.

Below example shows a form where various types of inputs such as text-field, Drop-Down, Radio-Button,check-box are used & also shows the success and error message on input validation.

Javascript Code

---

Lists

Lists are used to group together related pieces of information so they are clearly associated with each other and easy to read.

Spaced Lists

Spaced list is used to display list in same line for eg. navigation menu.

Stacked Lists with title & text

Stacked list is used to show notification section.

Stacked Lists with title only

---

Basic Modal

The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else.

Modal Demo

Javascript Code

---

Ratings

Ratings are used in product reviews, 1 to 5 star indicates Very-Bad to Excellent product experience.

In below example 5 star ratings is shown along with the display of experience word on click of particular star.

Javascript Code

---

Navigation Component

Navigation bar is used to navigate through the web apps or websites and their pages.

---

Grid Component

CSS Grid is a powerful tool that allows for two-dimensional layouts to be created on the web.

Grid 2 Column Layout

Grid 3 Column Layout

---

Snackbar Component

Snackbars provide brief messages about app processes at the bottom of the screen.

Snackbar Baseline & Snackbar Leading

Click below buttons to see Snackbar Demo

Javascript Code

---

Text Utilities

Below are the text utilities styles

Headings

Below are five heading styles from h1 to h5

Small text, Grey Text

Small text and gray text is used for secondary or less important information

Text with alignments

To align the text add 'text-left', 'text-center', 'text-right' class to its wrapper element.