Badges

The notification indicator consists of a circle with a number inside. We call this a pill or a badge. The notification should only be displayed if there is one or more items. Read more about notifications/badges in the UX Guidelines.

Use when:

You need to attract the user's attention to something that needs to be addressed.

Design

+99 +99 +99 +99 +99 +99

<span class="badge">+99</span>
<span class="badge badge-success">+99</span>
<span class="badge badge-warning">+99</span>
<span class="badge badge-danger">+99</span>
<span class="badge badge-info">+99</span>
<span class="disabled">
<span class="badge badge-success">+99</span>
</span>

Small badge (dot notification)

The position of this badge/notification can be changed using top/bottom/left/right helper clasess.

Example
HTML

Some text here with an icon and a small badge

<p class="position-relative d-inline-flex align-items-center mb-0">
	Some text here with an icon and a small badge
	<button type="button" class="btn btn-icon mb-0 ml-4">
		<span class="vismaicon vismaicon-dynamic vismaicon-filled vismaicon-error vismaicon-sm"></span>
		<span class="sr-only">Info button</span>
		<span class="badge badge-sm">This is a notification</span>
	</button>
</p>

Alternative color for small badge:

Example
HTML

Info/blue This is a notification

Success/green This is a notification

Warning/dark orange This is a notification

Danger/red This is a notification

<p class="position-relative d-inline-flex mr-16 pr-8">
	Info/blue
	<span class="badge badge-sm badge-info">This is a notification</span>
</p>
<p class="position-relative d-inline-flex mr-16 pr-8">
	Success/green
	<span class="badge badge-sm badge-success">This is a notification</span>
</p>
<p class="position-relative d-inline-flex mr-16 pr-8">
	Warning/dark orange
	<span class="badge badge-sm badge-warning">This is a notification</span>
</p>
<p class="position-relative d-inline-flex mr-16 pr-8">
	Danger/red
	<span class="badge badge-sm badge-danger">This is a notification</span>
</p>

Labels

Example
HTML

Label text Label text Label text Label text Label text

<span class="label">Label text</span>
<span class="label label-success">Label text</span>
<span class="label label-info">Label text</span>
<span class="label label-danger">Label text</span>
<span class="label label-warning">Label text</span>

More examples

Default top navigation

Example
HTML

<header class="navbar navbar-default demo-with-icons" id="nc4navTopMain" role="navigation">
	<div class="navbar-header">
		<div class="navbar-brand">
            <a tabindex="0" href="#!" id="vudNavDefaultApps" title="Spiris" aria-label="Spiris">
                <img src="../assets/img/spiris/spiris-logo.svg" title="Spiris" alt="Spiris logo">
            </a>
        </div>
	</div>
	<nav class="collapse navbar-collapse" id="nc4navCollapseMain" aria-label="Menu">
		<ul class="nav navbar-nav nav-tabs navbar-right first-level">
			<li class="icon dropdown shopping-cart">
				<a role="button" class="dropdown-toggle" href="#!" aria-label="Shopping cart" data-toggle="dropdown" aria-expanded="false">
					<span aria-hidden="true" class="vismaicon  vismaicon-dynamic vismaicon-menu vismaicon-shopping-cart"></span>
					27.250,00 SEK
					<span class="caret"></span>
					<span class="badge">5</span>
				</a>
				<ul class="dropdown-menu" role="menu">
					<li role="menuitem">
						<a href="#!" class="">Shopping cart items</a>
					</li>
				</ul>
			</li>
			<li class="icon attention">
				<a href="#!" title="email" role="button" aria-label="email">
					<span class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-email" aria-hidden="true"></span>
				</a>
			</li>
			<li class="icon">
				<a href="#!" title="chat" role="button" aria-label="chat">
					<span class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-chat" aria-hidden="true"></span>
					<span class="badge">2</span>
				</a>
			</li>
		</ul>
	</nav>
</header>

Primary top navigation

Example
HTML

<header class="navbar navbar-primary demo-with-icons" id="nc4navTopMain" role="navigation">
	<div class="navbar-header">
		<div class="navbar-brand">
            <a tabindex="0" href="#!" id="vudNavDefaultApps" title="Spiris" aria-label="Spiris">
                <img src="../assets/img/spiris/spiris-logo.svg" title="Spiris" alt="Spiris logo">
            </a>
        </div>
	</div>
	<nav class="collapse navbar-collapse" id="nc4navCollapseMain" aria-label="Menu">
		<ul class="nav navbar-nav nav-tabs navbar-right first-level">
			<li class="icon dropdown shopping-cart">
				<a role="button" class="dropdown-toggle" href="#!" aria-label="Shopping cart" data-toggle="dropdown" aria-expanded="false">
					<span aria-hidden="true" class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-shopping-cart"></span>
					27.250,00 SEK
					<span class="caret"></span>
					<span class="badge">5</span>
				</a>
				<ul class="dropdown-menu" role="menu">
					<li role="menuitem">
						<a href="#!" class="">Shopping cart items</a>
					</li>
				</ul>
			</li>
			<li class="icon attention">
				<a href="#!" title="email" role="button" aria-label="email">
					<span class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-email" aria-hidden="true"></span>
				</a>
			</li>
			<li class="icon">
				<a href="#!" title="Support" role="button" aria-label="Support">
					<span class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-chat" aria-hidden="true"></span>
					<span class="badge">2</span>
				</a>
			</li>
		</ul>
	</nav>
</header>

Secondary top navigation

Example
HTML

<header class="navbar navbar-secondary demo-with-icons" id="nc4navTopMain2" role="navigation">
	<div class="navbar-header">
		<div class="navbar-brand">
            <a tabindex="0" href="#!" id="vudNavDefaultApps" title="Spiris" aria-label="Spiris">
                <img src="../assets/img/spiris/spiris-logo.svg" title="Spiris" alt="Spiris logo">
            </a>
        </div>
	</div>
	<nav class="collapse navbar-collapse" id="nc4navCollapseMain" aria-label="Menu">
		<ul class="nav navbar-nav nav-tabs navbar-right first-level">
			<li class="icon dropdown shopping-cart">
				<a role="button" class="dropdown-toggle" href="#!" aria-label="Shopping cart" data-toggle="dropdown" aria-expanded="false">
					<span aria-hidden="true" class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-shopping-cart"></span>
					27.250,00 SEK
					<span class="caret"></span>
					<span class="badge">5</span>
				</a>
				<ul class="dropdown-menu" role="menu">
					<li role="menuitem">
						<a href="#!" class="">Shopping cart items</a>
					</li>
				</ul>
			</li>
			<li class="icon attention">
				<a href="#!" title="email" role="button" aria-label="email">
					<span class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-email" aria-hidden="true"></span>
				</a>
			</li>
			<li class="icon">
				<a href="#!" title="Support" role="button" aria-label="Support">
					<span class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-chat" aria-hidden="true"></span>
					<span class="badge">2</span>
				</a>
			</li>
		</ul>
	</nav>
</header>

List groups

Example
HTML

21Cras justo odio

9Cras justo odio 4Disabled list item Morbi leo risus1 1.971,51 SEKSelected list item Vestibulum at eros473,00 SEK

5.671,00 SEK Vestibulum maximus

<div class="list-group col-xxl-6 col-md-8" role="list">
	<div class="list-group-item list-group-title"><span class="badge">21</span>Cras justo odio</div>
	<a href="#!" role="listitem" class="list-group-item"><span class="badge">9</span>Cras justo odio</a>
	<a role="listitem" class="list-group-item disabled" aria-disabled="true"><span class="badge">4</span>Disabled list item</a>
	<a href="#!" role="listitem" class="list-group-item">Morbi leo risus<span class="badge">1</span></a>
	<a href="#!" role="listitem" class="list-group-item active"><span class="badge badge-nopill"><b>1.971,51</b> SEK</span>Selected list item</a>
	<a href="#!" role="listitem" class="list-group-item">Vestibulum at eros<span class="badge badge-nopill"><b>473,00</b> SEK</span></a>
	<div class="list-group-item list-group-footer">
		<span class="badge"><b>5.671,00</b> SEK</span>
		Vestibulum maximus
	</div>
</div>

Secondary list groups

Example
HTML

21Cras justo odio

9Cras justo odio 4Disabled list item Morbi leo risus1 1.971,51 SEKSelected list item Vestibulum at eros473,00 SEK

5.671,00 SEK Vestibulum maximus

<div class="list-group list-group-primary col-xxl-6 col-md-8" role="list">
	<div class="list-group-item list-group-title"><span class="badge">21</span>Cras justo odio</div>
	<a href="#!" role="listitem" class="list-group-item"><span class="badge">9</span>Cras justo odio</a>
	<a role="listitem" class="list-group-item disabled" aria-disabled="true"><span class="badge">4</span>Disabled list item</a>
	<a href="#!" role="listitem" class="list-group-item">Morbi leo risus<span class="badge">1</span></a>
	<a href="#!" role="listitem" class="list-group-item active"><span class="badge badge-nopill"><b>1.971,51</b> SEK</span>Selected list item</a>
	<a href="#!" role="listitem" class="list-group-item">Vestibulum at eros<span class="badge badge-nopill"><b>473,00</b> SEK</span></a>
	<div class="list-group-item list-group-footer">
		<span class="badge"><b>5.671,00</b> SEK</span>
		Vestibulum maximus
	</div>
</div>