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. Class alert can be used along with the other classes to give the sementic meanings to the alert messages. alert-success, alert-warning, alert-info, alert-error

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 a generic avatar class that can be used in association with any of 6 standard sizes for your avatars. avatar-xs, avatar-xs, avatar-s, avatar-m, avatar-l, avatar-xl, avatar-xxl. Check below the important classes and the way to implement.

Text Avatar

Similar to image avatars, text avatars can use those classes. One thing to note is that text avatars should mandatorily have the avatar-text.

Avatar Group

An avatar group can be used to showcase how many users contributed or participated in some event. To implement a avatar group just wrap all the avatars within a container with class named avatar-group.

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
For badges on image avatars use a span tag that has following classes: avatar-badge along with any of these classes: badge-red, badge-green, badge-yellow

Icons with badges

For badges on icons simply use a span tag that has the class: badge along with any of these classes: badge-red, badge-green, badge-yellow

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. btn-primary, btn-info, btn-warning, btn-error. Use any of these along with the btn class.

Outline Buttons

Use the class btn-outline along with any of the two classes depending on the primary and secondary color of your app: outline-primary, outline-secondary

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. The modal is wrapped within a modal-overlay class and the modal content is wrapped within the modal-wrapper class. Check below the implementation in css and javascript.

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. Use the id rating-star for each stars and the class names according to the value of the star such as rating-star-1, rating-star-2, rating-star-3, rating-star-4, rating-star-5

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. Wrap your slider with the class slider-container and the slider with the class slider. Also see below the code snippet for more understanding of the usage,

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 classes span from h1, h2, h3, h4, h5, h6. These heading classes can be associated with the primary-color and secondary-color to color them according to the use case.

Headings

Paragraphs and Spans

For paragraphs stackUI provides three variant of sizes: p, p-sm, p-xs in decreasing order respectively.

For spans stackUI provides two variant of sizes: span, span-sm in decreasing order respectively.

To color any text into grey you can use: text-grey.

Alignment

Align any text using these classes: text-left, text-center, text-right

Lists

Lists are integral part of any webpage, it can be found in navigation component or used to display bunch of related data.

Stacked Lists

StackUI provides different variants of the unordered lists, we can implement any type using the specific classname for the "ul" tag. ul class is common for all in associations with any of these classes: ul-circle,ul-square,ul-disc,ul-alpha,ul-lower-roman,ul-upper-roman respectively.

Spaced Lists

For spaced list items you can use this class ul-flex-spaced and thats it. :)

Navigation

The entire nav component is wrapped within a id navbar, the same wrapping div has the following classes to make it flex: "nav dfr-aic df-jcsb"