Content Comparison

Versions Compared

Version	Old Version 24	New Version 25
Changes made by	Itay lapid (Unlicensed)	Itay lapid (Unlicensed)
Saved on	Jul 10, 2019	Dec 25, 2019

Key

This line was added.
This line was removed.
Formatting was changed.

Description

Status


colour	Yellow
title	Ongoing

Tabs enable content organisation at a high level, such as switching between views, data sets, or functional aspects. Allowing user for dual screen support, and workspace customisation.

Expand

title	Expand for more info
order	update

TBD

Related items:

Lorem ipsum dolor si

Types

Type	Usage (TBD)
Main Tabs Image Added	Use it as a tabbed navigation - Single row above their associated content
2nd Level Tabs Image Added	Single row above their associated content
Details Pane Tabs Image Added	Single row above their associated content in the details pane
Ribbon Tabs	TBD

Usage & Behavior

Guidelines

Present tabs as a single row above their associated content.
Tabs can be switched by clicking on a different tab.

Labels

Each tab label describes its content and sets user expectations.
Tabs with related content should be grouped adjacent to each other
Labels are concise and use one to two words maximum.
Tab labels should succinctly describe the content within.
Icons are not permitted in tab labels.

Number of tabs

A maximum of four tabs may be displayed. This is to maintain an uncluttered UI and reduce cognitive load for users.

Order

TBD

States

Main tabs	2nd level tabs	Details pane tabs	Ribbon tabs

Current appearances in our products

Expand

title	Expand to view products and screenshots
order	update

New LUX design

Html macro

sanitize	false

<link rel="stylesheet" href="https://ux.verint.com/fonts/css/verint_lux.css">
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">


<div class="card">
			<div class="card-header">Main Tabs <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre' ).toggle()">Toggle Markup</button></div>
			<div class="card-body">
				<form>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label>
						<div class="col-lg-4">
							<ul class="nav nav-tabs nav-tabs-sm nav-justified">
							  <li class="nav-item">
							    <a class="nav-link active show" data-toggle="tab" href="#design">Design</a>
							  </li>
							  <li class="nav-item">
							    <a class="nav-link" data-toggle="tab" href="#collect">Collect</a>
							  </li>
							  <li class="nav-item">
							    <a class="nav-link" data-toggle="tab" href="#analyze">Analyze</a>
							  </li>
							</ul>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><ul class="nav nav-tabs nav-tabs-sm nav-justified">
	<li class="nav-item">
		<a class="nav-link active show" data-toggle="tab" href="#design">Design</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" data-toggle="tab" href="#collect">Collect</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" data-toggle="tab" href="#analyze">Analyze</a>
	</li>
</ul>
<div class="tab-content">
	<div id="design" class="tab-pane fade active show"></div>
	<div id="collect" class="tab-pane fade"></div>
	<div id="analyze" class="tab-pane fade"></div>
</div></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Disabled</label>
						<div class="col-lg-4">
							<ul class="nav nav-tabs nav-tabs-sm nav-justified">
							  <li class="nav-item">
							    <a class="nav-link disabled" data-toggle="tab" href="#design">Design</a>
							  </li>
							  <li class="nav-item">
							    <a class="nav-link disabled" data-toggle="tab" href="#collect">Collect</a>
							  </li>
							  <li class="nav-item">
							    <a class="nav-link disabled" data-toggle="tab" href="#analyze">Analyze</a>
							  </li>
							</ul>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><ul class="nav nav-tabs nav-tabs-sm nav-justified">
	<li class="nav-item">
		<a class="nav-link disabled" data-toggle="tab" href="#design">Design</a>
	</li>
	<li class="nav-item">
		<a class="nav-link disabled" data-toggle="tab" href="#collect">Collect</a>
	</li>
	<li class="nav-item">
		<a class="nav-link disabled" data-toggle="tab" href="#analyze">Analyze</a>
	</li>
</ul>
<div class="tab-content">
	<div id="design" class="tab-pane fade active show"></div>
	<div id="collect" class="tab-pane fade"></div>
	<div id="analyze" class="tab-pane fade"></div>
</div></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>

Table of Contents

outline	true
style	square