Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.

In computing, an avatar (also known as a profile picture or userpic) is a graphical representation of a user or the user's character or persona.

	// small sm
	<img class="avatar avatar-sm" src="images/avator-img.jpg" alt="avator">

	// medium md
	<img class="avatar avatar-md" src="images/avator-img.jpg" alt="avator">

	// large lg
	<img class="avatar avatar-lg" src="images/avator-img.jpg" alt="avator">

	// extra large xl
	<img class="avatar avatar-xl" src="images/avator-img.jpg" alt="avator">

Alerts are used to communicate a state that affects a system, feature or page

Badges are used to highlight an item's status for quick recognition.

	// Active avatar badge
	<div class="badge-av">
		<img class="badge-img" src="images/avatar-person.jpg" alt="person">
		<span class="status status-active"></span>
	</div>

	// Idl avatar badge
	<div class="badge-av">
		<img class="badge-img" src="images/avator-img.jpg" alt="person">
		<span class="status status-warning"></span>
	</div>

	// Offline avatar badge
	<div class="badge-av">
		<img class="badge-img" src="images/avatar-person2.jpg" alt="person">
		<span class="status status-offline"></span>
	</div>

Used to display information to users, with button to trigger actions. These are very versatile and often found in eCommerce websites and blogs.

	// Blog card with image
	<div class="card">
		<img class="card-img" loading="lazy" src="images/card-header.jpg" alt="card">
		<div class="card-body">
			<div class="card-title">Card Title</div>
			<div class="card-subtitle">Card Subtitle</div>
			<p class="card-text">Lorem ipsum dolor sit amet 
				consectetur adipisicing elit. Repellendus dicta 
				praesentium quam temporibus enim quae!</p>
		</div>
		<div class="card-footer">
			<button class="btn btn-primary">Read more</button>
		</div>
	</div>

	// Card with only text
	<div class="card">
		<div class="card-body">
			<div class="card-title">Card Title</div>
			<div class="card-subtitle">Card Subtitle</div>
			<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
				Aliquam eligendi vitae aut? Quidem praesentium eius molestiae. 
				Cumque facere neque necessitatibus, sit suscipit praesentium. 
				Rerum odit, quisquam iusto placeat ad ab.</p>
		</div>
		<div class="card-footer">
			<button class="btn btn-primary">Read more</button>
		</div>
	</div>

	// Simple Navigation
	<nav class="navbar">
		<div class="navbar-brand">Brand</div>
		<ul class="nav-items">
			<li><a href="#" class="nav-link">Home</a></li>
			<li><a href="#" class="nav-link">Blog</a></li>
			<li><a href="#" class="nav-link">Contact</a></li>
		</ul>
	</nav>

	// Navigation with Button
	<nav class="navbar">
		<div class="navbar-brand">Brand</div>
		<ul class="nav-items">
			<li><a href="#" class="nav-link">Home</a></li>
			<li><a href="#" class="nav-link">Blog</a></li>
			<li><a href="#" class="nav-link">Collection</a></li>
		</ul>
		<button class="btn btn-primary">Download</button>
	</nav>