north

Typography

UIWizard provides a set of typography styles that can be used to create a consistent look and feel across your application.

Examples of Headings:

Heading 1

Heading 2

Heading 3

Heading 4

Examples of Paragraphs:

This is main paragraph.

This is doc paragraph.

This is footer paragraph.

Example of Text Colors:

Primary Text.

Accent Text.

Danger Text.

Success Text.

Warning Text.

Dark Text.

Examples of Span:

This is span 1.

This is span 2.

Alert

Alerts can be used to place emphasis on a dialog or message that a visitor needs to see.

Class	Description
alert	To make the div an alert container.
alert-info	To create an information alert.
alert-warning	To create an warning alert.
alert-error	To create an error alert.
alert-success	To create a success alert.

Examples of Alerts:

info This is a information message.

warning This is a warning message.

dangerous This is an error message.

check_circle This is a success message.

Avatar

An avatar is a visual representation of a person for use in digital contexts. It's usually a computer-generated image, such as a bitmoji. On social media, the term “avatar” also refers to your profile picture—the image that represents you on the platform.

Class	Description
avatar	To convert the image into avatar .
avatar-lg	To create large size avatar image.
avatar-md	To create medium size avatar image.
avatar-sm	To create small size avatar image.
avatar-span-lg	To create large size initials avatar.
avatar-span-md	To create the medium size initials avatar.
avatar-span-sm	To create the small size initials avatar.

Examples of Image Avatars:

Examples of Initials Avatars:

VS RS SR

Badge

Badges are the elements that are applied on the other elements mostly to display the number of items, notifications, status of the users etc.

Class	Description
badge-container	To wrap the icon and number in one div.
badge-number	To add the number on the top right of the icon.
badge-dark	To add dark background color (red).
badge-light	To add the light background color (yellow).
badge-online	To create an user status badge that will add the green border to the online user.
badge-offline	To create an user status badge Pthat will add border red and grayscale filter to the offline user.
badge-idle	To create an user status badge that will add the yellow border color and sepia filter to the image.

Examples of Number Badges:

shopping_cart

notifications

Examples of User Status Badges:

Button

Buttons are used to perform an action. They are usually used in forms, dialogs, and other places where the user needs to interact with a component. UIWizard provides a set of buttons.

Class	Description
btn	To add the button classes like hover effect, box shadow and border radius to the buttons.
btn-primary	To add primary background color.
btn-secondary	To add the secondary background color.
btn-accent	To add the accent background color.
btn-disabled	To make the button disabled and make the cursor not allowed.
btn-primary-outlined	To make the primary outlined button.
btn-secondary-outlined	To make the secondary outlined button.
btn-accent-outlined	To make the accent outline button.
btn-cart-icon	To add the cart icon button.
btn-delete-icon	To add the delete icon button.
btn-send-icon	To add the send icon button.
btn-float	To create the floating buttons.

Examples of General Buttons:

Button Button Button Button

Examples of Outlined Buttons:

Button Button Button

Examples of Buttons with Icons:

shopping_cart ADD TO CART delete Delete send Send

Examples of Floating Buttons

north

add

Images

Images are used to display an image. They are usually used as hero images, or as a background image.

Class	Description
image-large	To create the large responsive image.
image-overlay	To create the image with the text overlay.
image-text-center	To add the text in the center of the image.
image-text-tl	To add the text at the top left of the image.
image-text-bl	To add the text at the bottom left of the image.
image-text-tr	To add the text at the top right of the image.
image-text-br	To add the text at the bottom right of the image.

Examples of Large Image:

Example of Overlay Text Image:

Center

Top-left

Bottom-left

top-right

bottom-right

Navigation

Navigation is used to navigate between different pages. It is mostly used at the top of the page.

Class	Description
navigation	To make the div the navigation bar.
navigation-ul	To style the navigation links.
navigation-input-order	To change the order of the search bar on small devices.
navigation-input	To style the search input.

Examples of Navigation:

Modal

Modal is used to display a popup window. It is used to display a message, or a form.

Class	Description/th>
modal	To make the div the modal that will have backdrop style.
modal-container	To contain the modal contents like button, title.
modal-btn	To style the buttons in the modal content.

Example of Modal:

Slider

Slider is used to select the values and price of the product. It is displayed using the range type of the input.

Class	Description
slider-container	To add the slide contents.
slider-values	To add the value above the slider.
slider	To style th slider.

Example of Slider:

10 Value 500

Snackbar/Toast

Snackbars are often used as tooltips/popups to show a message on the screen.

Class	Description
snackbar	To convert the div into snackbar..

Example of Snackbar:

check_circle This is a success message.

dangerous OOPS! Not Found Anything.