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


	<h1 class="h1">Heading 1</h1>

	<h2 class="h2">Heading 2</h2>

	<h3 class="h3">Heading 3</h3>

	<h4 class="h4">Heading 4</h4>

view raw Typography Headings hosted with ❤ by GitHub

Examples of Paragraphs:

This is main paragraph.

This is doc paragraph.

This is footer paragraph.


	<p class="p1">This is main paragraph.</p>

	<p class="p2">This is doc paragraph.</p>

	<p class="p3">This is footer paragraph.</p>

view raw Typography Paragraphs hosted with ❤ by GitHub

Example of Text Colors:

Primary Text.

Accent Text.

Danger Text.

Success Text.

Warning Text.

Dark Text.


	<p class="p1 text-primary">Primary Text.</p>

	<p class="p1 text-accent">Accent Text.</p>

	<p class="p1 text-danger">Danger Text.</p>

	<p class="p1 text-success">Success Text.</p>

	<p class="p1 text-warning">Warning Text.</p>

	<p class="p1 text-dark">Dark Text.</p>

view raw Typography Text Colors hosted with ❤ by GitHub

Examples of Span:

This is span 1.

This is span 2.


	<span class="span-h1">This is span 1.</span>

	<span class="span-h2">This is span 2.</span>

view raw Typography Span hosted with ❤ by GitHub

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.


	<div class="alert alert-info span-h1">
	<span class="material-symbols-outlined"> info </span>
	This is a information message.
	</div>

	<div class="alert alert-warning span-h1">
	<span class="material-symbols-outlined"> warning </span>
	This is a alert message.
	</div>

	<div class="alert alert-error span-h1">
	<span class="material-symbols-outlined">
	dangerous
	</span>
	This is a error message.
	</div>

	<div class="alert alert-success span-h1">
	<span class="material-symbols-outlined">
	check_circle
	</span>
	This is a success message.
	</div>

view raw Alert hosted with ❤ by GitHub

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:


	img
	src="https://randomuser.me/api/portraits/men/47.jpg"
	alt="Random Image Man"
	class="avatar avatar-lg"
	/>

	<img
	src="https://randomuser.me/api/portraits/men/62.jpg"
	alt="Random Image Man"
	class="avatar avatar-md"
	/>

	<img
	src="https://randomuser.me/api/portraits/men/61.jpg"
	alt="Random Image Man"
	class="avatar avatar-sm"
	/>

view raw Image Avatar hosted with ❤ by GitHub

Examples of Initials Avatars:

VS RS SR


	<span class="avatar-span-lg ">VS</span>

	<span class="avatar-span-md ">RS</span>

	<span class="avatar-span-sm ">SR</span>

view raw Span Avatar hosted with ❤ by GitHub

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


	<div class="badge-container">
	<span class="material-icons"> shopping_cart </span>
	<div class="badge-number badge-dark">2</div>
	</div>

	<div class="badge-container">
	<span class="material-icons"> notifications </span>
	<div class="badge-number badge-light">6</div>
	</div>
	</div>

view raw Number Badge hosted with ❤ by GitHub

Examples of User Status Badges:


	<div class="badge-container">
	<img
	src="https://randomuser.me/api/portraits/women/65.jpg"
	alt="Random Image Woman"
	class="avatar avatar-lg badge-online"
	/>
	</div>

	<div class="badge-container">
	<img
	src="https://randomuser.me/api/portraits/women/84.jpg"
	alt="Random Image Woman"
	class="avatar avatar-md badge-offline"
	/>
	</div>

	<div class="badge-container">
	<img
	src="https://randomuser.me/api/portraits/women/63.jpg"
	alt="Random Image Woman"
	class="avatar avatar-sm badge-idle"
	/>
	</div>

view raw Badge Status hosted with ❤ by GitHub

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


	<a href="" class="btn btn-primary">Button</a>

	<a href="" class="btn btn-secondary">Button</a>

	<a href="" class="btn btn-accent">Button</a>

	<a href="" class="btn btn-disabled " >Button</a>

view raw General Buttons hosted with ❤ by GitHub

Examples of Outlined Buttons:

Button Button Button


	<a href="" class="btn btn-primary-outlined">Button</a>

	<a href="" class="btn btn-secondary-outlined">Button</a>

	<a href="" class="btn btn-accent-outlined">Button</a>

view raw Outlined Buttons hosted with ❤ by GitHub

Examples of Buttons with Icons:

shopping_cart ADD TO CART delete Delete send Send


	<a href="#" class="btn btn-cart-icon">
	<span class="material-icons"> shopping_cart </span>
	ADD TO CART
	</a>

	<a href="#" class="btn btn-delete-icon">
	<span class="material-icons"> delete </span>
	Delete
	</a>

	<a href="#" class="btn btn-send-icon">
	<span class="material-icons"> send </span>
	Delete
	</a>

view raw Icon Buttons hosted with ❤ by GitHub

Examples of Floating Buttons

north

add


	<div class=" btn-float btn-primary">
	<span class="material-icons"> north </span>
	</div>

	<div class="btn-float btn-secondary">
	<span class="material-icons"> search </span>
	</div>

	<div class="btn-float btn-accent">
	<span class="material-icons"> add </span>
	</div>

view raw Flaoting Buttons hosted with ❤ by GitHub

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:


	<img
	src="https://picsum.photos/1000/400"
	alt="Random Image"
	class="image-large"
	loading="lazy"
	/>

view raw Large Image hosted with ❤ by GitHub

Example of Overlay Text Image:

Center

Top-left

Bottom-left

top-right

bottom-right


	<div class="image-container">
	<img
	src="https://picsum.photos/1000/400"
	alt="Random Image"
	loading="lazy"
	class="image-overlay"
	/>
	<h2 class="h2 image-text-center">Center</h2>
	<h2 class="h2 image-text-tl">Top-left</h2>
	<h2 class="h2 image-text-bl">Bottom-left</h2>
	<h2 class="h2 image-text-tr">top-right</h2>
	<h2 class="h2 image-text-br">bottom-right</h2>
	</div>

view raw Overlay Text Image hosted with ❤ by GitHub

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:

	<div class="navigation">
	<div class="h4">LOGO</div>
	<ul class="navigation-ul">
	<li class="navigation-input-order">
	<input
	class="navigation-input"
	placeholder="Search"
	type="text"
	/>
	</li>
	<li>Home</li>
	<li class="navigation-about">About</li>
	<li>Contact Us</li>
	</ul>
	</div>

view raw General Naviagation hosted with ❤ by GitHub

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:

view raw Modal hosted with ❤ by GitHub

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


	<div class="slider-container">
	<div class="slider-values">
	<span class="span-h1">10</span>
	<span class="span-h1">Value</span>
	<span class="span-h1">500</span>
	</div>
	<input
	type="range"
	min="10"
	max="500"
	value="15"
	class="slider"
	/>
	</div>

view raw Slider hosted with ❤ by GitHub

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.

view raw Modal hosted with ❤ by GitHub

dangerous OOPS! Not Found Anything.

	<!------------------ HTML Code ----------------->

	<div class="snackbar">
	<div class="alert alert-success span-h1">
	<span class="material-symbols-outlined">
	check_circle
	</span>
	This is a success message.
	</div>

	<!------------------ JavaScript Code ----------------->

	const snackbarDemoBtn = document.getElementById('snackbarDemoBtn')
	const snackbar = document.querySelector('.snackbar')

	snackbarDemoBtn.addEventListener('click', showSnackBar)

	function showSnackBar() {
	snackbar.style.display = 'block'

	setTimeout(() => {
	snackbar.style.display = 'none'
	}, 1500)
	}


	<div class="modal">
	<div class="modal-container">
	<div>
	<p class="p1">
	Are you sure you want to delete this item?
	</p>
	</div>
	<div class="modal-btn">
	<a href="" class="btn btn-delete-icon">
	<span class="material-icons"> delete </span>
	Delete
	</a>
	<a href="" class="btn btn-secondary">
	<span class="material-icons"> cancel </span>
	Cancel
	</a>
	</div>
	</div>
	</div>