Alerts

The alert dialog displays some important information to the user. StackUI provides 4 different color schemes of alerts to show case relevant system alert to users.

Avatars

Avatar is basically the display picture of a user. It generally is very small in size and the sizes can vary depending on the use case. Stack UI provides 6 standard sizes for your avatars. Check below the important classes and the way to implement.

Text Avatar

Avatar Group

An avatar group can be used to showcase how many users contributed or participated in some event.

Badges

Badges can be used to communicate the status of a user. It can also be used a signal for other users to understand if someone is online or offline.

Avatar with badges

Badges indicate the status of the user. example-> Green: online

Icons with badges

Buttons

The Button component can be used to complete an action or a specific operation such as submitting a form, or sending some document or mails etc.

There are four different categories of buttons provided by StackUI. Each resembles the sementic meaning that it holds.

Outline Buttons

Link Buttons

Any link from "a" tag can be styled into button. Using the same button class with the varient user likes to incorporate. Mandatory class to include is btn-link

Icon Buttons

Any icon can be styled as a button using the classes provided by the StackUI for buttons component. Mandatory class to include is btn-icon

Floating Buttons

Floating buttons are usually icon buttons that calls for an important action on the overall page. Generally located at bottom right.
Stack UI provides few classes that makes the design look cool and clean. But the user has to explicitly define the position of the buttons according to their respective use cases. By default it is absolute to the viewport.

Cards

A card is a group of related information, generally comprises of an Image, a title, some data like price, rating, description and sometimes also has a call to action buttons.

Normal Card Variants

The following examples contains the Textual Cards and the Cards with close icon

Vertical Cards: Image & Text

Horizontal Cards: Image & Text

The html structure remains the same for horizontal class as well, One just need to replace the main wrapper class from "card-wrapper-v" to "card-wrapper-h". See below the code example for better understanding.

Responsive Images

Responsive images change their aspect ratio according to the container it is contained in. Stack UI provides the container img-wrapper that allows you to wrap your image and get it displayed in a responsive nature. You can change the height and width of the wrapper according to the usecase.

Round Images

To get your images rounded, simply add the img-round class to your wrapper class.

Inputs

Inputs are used to collect data from users directly in form of texts, numbers, clicks, checkboxes, radio buttons etc. Different styles are provided by StackUI for your labels, inputs, different colored borders that has sementic meanings. They can be used separately when needed or within a form group.

Input Variations

Modal

A modal is a dialog box/popup window that is displayed on top of the current page disabling all the other content on the page for that instance.

HTML Code for Modal

Javascript Code for Modal

Rating

A rating component can be used on any ecommerce platform, where we need to collect user experience with product or service in forms of rating.

HTML code for Rating

Javascript code for Rating

Slider

Sliders are majorly used to take inputs from user that ranges between two values. A minimum value and a maximum value.

Typography

Various text utility classes that can be used to design text based use cases. Below are all the examples for Headings, paragraphs, span, and more.

Headings

Paragraphs and Spans

Alignment