Examples of Alert without close button.

Alerts are available for any length of text, as well as an optional dismiss button.Alerts are available in five different variants (primary,success,danger,warning,secondary) For proper styling, use one of the five required contextual classes (e.g., .success-alert).

Example of Alert with close button.

Alerts can have a button to dismiss the alert.

JavaScript code

Examples of Image Avatar.

Avatars with image are available in four different variants based on size large, medium, small, extra-small (e.g., .avatar-lg).

Examples of Text Avatar.

Avatars with text are available in four different variants based on size large, medium, small, extra-small. Use avatar-text class here. (e.g., .avatar-lg).

Examples of Status Badge.

Badges on avatars can be used to show information if the user is online or offline.

Example of Horizontal card.

Primary button can also have multiple variants depending upon the action it is being used for.

Examples of Vertical card.

Below are 3 variations of vertical card. Card with badge, card with dismiss button, card with only text.

Example of Vertical card with overlay text.

To overlay text or any other component ,we need to wrap overlay container(div which needs to be overlaid) and the overlaying component(which overlays) in a single div

Example of Active fields.

Add required-field class with label tag to show * with the label, if the corresponding field is required and required attribute to the corresponding input field.

Example of Disabled and Read only fields.

Add the readonly boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

Add disabled-field class to style it like a disabled field and disabled boolean attribute to the corresponding input field.

Example of Form validaton.

Below is an example of form validation, errors are shown when validatons are not met.

Example of Responsive image

Add responsive-img to fit the image according to its parent's width

Example of Round image

Add circular-img to get a circular image

Example of Readonly rating

Example of Readonly rating

JavaScript code

Example of Heading text

Directly h1,h2,h3,h4,h5,h6 tags could be used or class h1,h2,h3,h4,h5,h6 can be applied to get the required font size

Example of Body text

Any of the classes from body-typo-xs, body-typo-md, body-typo-lg, typo-lg can be applied to p tag to get required styles.

Example of some other text styles

Check the classes from code below to ger desired results.

Lists are very handy and can be used for navigation bar, stacked notifications ,articles etc

Example of Unordered list

Add classes according to the type of bullet required . Check HTML code below.

Example of Ordered list

Add classes according to the type of bullet required . Check HTML code below.

Example of Stacked notification

This is a stacked list of notifications. Any content can be added to li tag.

Navigation bar is used to navigate through the web application with ease and items in navigation bar changes depending upon the screen size.

Example of Unordered list

Add classes according to the type of bullet required . Check HTML code below.

Modals can be used to perform certail actions without interrupting with main flow of the web application.It could be used to perform a single action or a series of action.

Live Demo

Click the button below to open the modal .Modal can be closed by either clicking on close button or clicking outside the modal.Check the JavaScript code below to achieve this functionality.

JavaScript code

Toasts are used to show feedback message to end user. This component could alos be used as a snackbar by introducing an action button.

Live Demo

Click the button below to show the toast. Check the JavaScript code below to achieve this functionality.

JavaScript Code

Grids are very useful while designing the layout of the web application under different screen sizes.

Example of 2 column grid layout

For screen sizes greater than 480px items are arranged in a grid of 2 and below 480px, items get stacked

Example of 3 column grid layout

For screen sizes greater than 480px items are arranged in a grid of 3 and below 480px, items get stacked