tabler.tabler/shared/includes/cards/navbar-notifications.html

<div class="card">
	<div class="card-header d-flex">
		<h3 class="card-title">Notifications</h3>
		<div class="btn-close ms-auto" data-bs-dismiss="dropdown"></div>
	</div>
	<div class="list-group list-group-flush list-group-hoverable">
		<div class="list-group-item">
			<div class="row align-items-center">
				<div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
				<div class="col text-truncate">
					<a href="#" class="text-body d-block">Example 1</a>
					<div class="d-block text-secondary text-truncate mt-n1">
						Change deprecated html tags to text decoration classes (#29604)
					</div>
				</div>
				<div class="col-auto">
					<a href="#" class="list-group-item-actions">
						{% include "ui/icon.html" icon="star" color="muted" %}
					</a>
				</div>
			</div>
		</div>
		<div class="list-group-item">
			<div class="row align-items-center">
				<div class="col-auto"><span class="status-dot d-block"></span></div>
				<div class="col text-truncate">
					<a href="#" class="text-body d-block">Example 2</a>
					<div class="d-block text-secondary text-truncate mt-n1">
						justify-content:between ⇒ justify-content:space-between (#29734)
					</div>
				</div>
				<div class="col-auto">
					<a href="#" class="list-group-item-actions show">
						{% include "ui/icon.html" icon="star" color="yellow" %}
					</a>
				</div>
			</div>
		</div>
		<div class="list-group-item">
			<div class="row align-items-center">
				<div class="col-auto"><span class="status-dot d-block"></span></div>
				<div class="col text-truncate">
					<a href="#" class="text-body d-block">Example 3</a>
					<div class="d-block text-secondary text-truncate mt-n1">
						Update change-version.js (#29736)
					</div>
				</div>
				<div class="col-auto">
					<a href="#" class="list-group-item-actions">
						{% include "ui/icon.html" icon="star" color="muted" %}
					</a>
				</div>
			</div>
		</div>
		<div class="list-group-item">
			<div class="row align-items-center">
				<div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
				<div class="col text-truncate">
					<a href="#" class="text-body d-block">Example 4</a>
					<div class="d-block text-secondary text-truncate mt-n1">
						Regenerate package-lock.json (#29730)
					</div>
				</div>
				<div class="col-auto">
					<a href="#" class="list-group-item-actions">
						{% include "ui/icon.html" icon="star" color="muted" %}
					</a>
				</div>
			</div>
		</div>
	</div>
	<div class="card-body">
		<div class="row">
			<div class="col">{% include "ui/button.html" block text="Archive all" %}</div>
			<div class="col">{% include "ui/button.html" block text="Mark all as read" %}</div>
		</div>
	</div>
</div>