UI Slayer demo

Avatar

Avatars are user profile pictures, usually found in circular shapes. Avatars can be used for 'container' objects — projects, spaces, repositories, etc — to give them a recognizable visual identity. These representations are used for the attention grabbing on various social medias too. There are four sizes available: avatar--xsm , avatar--sm, avatar--md & avatar--lg.

Alert

Alerts make it possible for user's to be up to date with information that matters the most. By using alerts, you provide contextual feedback messages to your users, depending on actions performed by them. There are four types of alert available: alert--success , alert--warning, alert--error & alert--info.

This is success alert

This is error alert

This is warning alert

This is info alert

Badges

Badges are small circles, positioned either at top-right or bottom-right of the parent component. Badge can be used to display numbers, online / offline status, depending on where they are used.

Badges on icons

Badges on icons are totally dependent on the Icon size so you don't have to worry about sizing.

Badges on avatars

Badges on avatars are available in four sizes: badge__avatar--lg, badge__avatar--md, badge__avatar--sm & badge__avatar--xsm for use with respective avatar size.

Badges positioning and color

You can adjust the positioning of badges on left and right using --right and --left. You can also adjust the color of the badge on avatar using online and offline.

Buttons

Buttons are essential to the working of any website. They allow users to perform multiple actions on a website, from triggering actions to accessing different parts of a website. There are multiple types of button your can use: primary-btn, secondary-btn, link-btn, icon-btn & floating-action-btn(which is visible at the bottom right corner.)

Link Link

Cards

Cards play a key role in showing data in a concise manner. Mostly seen on E-Commerce websites like amazon and flipkart, cards are used to create product illustration, alongwith information and may also come with multiple action buttons. You can use vertical card, horizontal card, card with badges, card with dismiss, and card with text overlay.

Vertical Card

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae eos dolores sed molestiae numquam impedit expedita, suscipit, quia quo hic, dignissimos non tempora! Beatae mollitia magnam, blanditiis totam eveniet Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae eos dolores sed molestiae numquam impedit expedita, suscipit, quia quo hic, dignissimos non tempora! Beatae mollitia magnam, blanditiis totam eveniet.

Horizontal Card

Lorem Ipsum

Card with badges and dismiss

New

Lorem Ipsum

Card with text overlay

Text Overlay

Images

Graphical or pictorial representation on every website is very essential which we can achieve with the following classes: responsive-img & rounded-img.

Input

Inputs allow website users to enter or share their information, across many usecases. Generally used for sign-up/login, user input and feedback as well.

Label

Lists

Lists are very useful in documenting the details and also presenting data in arranged manner. There are many types of list that you can use like spaced lists, stacked list & nested list.

Spaced list

Item One
Item Two
Item Three

Item One
Item Two
Item Three

Stacked list

Item One
Item Two
Item Three

Nested lists

Item One
Item Two

Sub Item One
Sub Item Two

Navigation

Navigation Bars are really important for navigating through websites and help users to go through different pages. You can adjust the nav item position using justify-start, justify-center & justify-end

Nav bar - Left aligned items

Nav bar - center aligned items

Nav bar - Right aligned items

Modal

A modal is a dialog box/popup window that is displayed on top of the current page.

Rating

A very useful tool to work on for increasing customer interaction and their interactivity. Ratings provide insight about various aspects of your website, allowing your users to share their opinions about any item or service.

Toast

Toast provide brief messages about various processes at the bottom of the screen. These can range from simple messages to also having trigger buttons.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Grid

Grids are really amazing and useful for creating layouts. We can design whole website with the help of this and also you would not need to worry much about the responsiveness.

Grid-2

This example shows two column grid, you can create the same using grid-2.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum minima tenetur omnis amet excepturi, quis unde nulla ipsum! Incidunt, impedit tempore. At sapiente totam harum ipsum necessitatibus quam quae. Ipsum!

Grid-3

This example shows three column grid, you can create the same using grid-3.