Avatar

Show the active user identity using Avatar component

Round avatar

Code </>

Square avatar

Code </>

Alert

For every action there should be equivalent feedback to users. Provide repsonive messages to users by using the Alerts

Code </>

Badge

Badge on icon

Notifications, messages, cart etc., icons needs to have badge to display the number of respective items it has.

Code </>

Badge on avatar

Show the status on avatar using badges. Change the badge-status class color and use different icons to show different status.

Code </>

Buttons

Buttons are used on do take some actions after the user click

Code </>

Cards

A card is a container which includes options for headers and footers, a wide variety of content, background colors, and display action items.

Cards With Badges

A card with badge higlights the specific card from other cards.

Code </>

Cards With Dismiss

Close the shown card using dismiss option on it. Add functionality to the dimiss button on the card.

Code </>

Cards with Text Overlay

Overlay the important text on the card to highlight it.

Code </>

Text only cards

When we have only text that needs to be shown as card use below simple text only cards.

Code </>

Horizontal Card

Show cards view in landscape on large screens and normal card in smaller screens. Yes it is responsive card

Code </>

Cards with Shadow

Shadowing always gives 3D effect to an element

Code </>

images

Responsive-Image

Having images responsive on the sites makes it beautiful and not to worry of screen sizes much.

Round Responsive-Image

Another resposive image but this time round which will fit for all the screen sizes.

Code </>

Input

User inputs are essential for a site to show the contents to the users.

Primary Input

Input With Error Style

Code </>

Navigation

Navigation bar top essential element on any page to follow the users from sites one page to another page flawlessly. These nav are responsive and will have hamburger menu below 760px.

Dark NavBar

Light Nav Bar

Navbar With Search And Icons

Code </>

Text Utilities

In a page we come across different text to highlight there importance or represent a content. Below are few useful handy text utilities

Headings

Code </>

Small Text

Code </>

Gray Text

Code </>

Different Text Alignment

Code </>

Snackbar

The snackbar component has a message that appears at the bottom of the interface to provide quick, at a glance feedback on the outcome of an action.

Baseline Leading Code </>

List

Listing of data seen as multiple articles, notoification so on and here you can find simple spaced and stacked listing items.

Spaced

• 4 ⭐️ & Above
• 3 ⭐️ & Above
• 2 ⭐️ & Above
• 1 ⭐️ & Above

Stacked

• Notification 1
• Notification 2
• Notification 3
• Notification 4

Code </>

Rating

One of the way to showing ratings is by using the stars.

Star Ratings

Code </>

Modal

Modal Are Dialog Boxes That Needs Some Action.

Modal Box Code </>

Simple Grids

Grids are use to divide the UI components in 2-dimension.Below grids are responsive as well.

Two Items In Grid

Three Items In Grid

Code </>