sUIt Wardrobe

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 beatiful 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 usres. So the input elements are

Primary input

Secondary input

Code </>

lists

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

Spaced

• item 1
• item 2
• item 3
• item 4

Stacked

• item 1
• item 2
• item 3
• item 4

Code </>

Navigation Bars

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 768px

Dark Nav Bar

Light Nav Bar

Code </>

Modal

Modals are dialog boxes pops up on the screen and will stay until actions are taken

Modal please Code </>

Rating

We rate everthings around us. One of the way to showing ratings is by using the stars.

Star Ratings

Code </>

Simplified Grid

Grids are usefully to place the UI components in 2-dimension. Below are the simple and responsive grids

Two items in grid

Three items in grid

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

Small text

Small Text

Gray Text

A gray text

Center

I'm a text, sit at center

Code </>

Toast

Toast is an interactive popup window for showing the message to the user

Code </>

Notify

The notify 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

Notify Me Code </>