Tabs
Line styled tabs
Line-styled tabs is for the primary use. You can include an .c-dot-notification sign inside a tab. See also a document about "Badge".
Report
Variations
Basic Information
sass:
.tab-example-container
padding: 40px
border-right: 1px solid #dbe0eb
border-bottom: 1px solid #dbe0eb
border-left: 1px solid #dbe0eb
ul.c-tabs
li.active
a href="#" Report
li
a href="#"
| Variations
.c-dot-notification
li
a href="#" Basic information
li.active
a href="#"
| Multi
br
| Line
li
a href="#"
| Multi
br
| Line
.c-dot-notification
.c-tab-content
.c-tab-pane.active
.tab-example-container Report
.c-tab-pane
.tab-example-container Variations
.c-tab-pane
.tab-example-container Basic Information
<style type="text/css">
.tab-example-container {
padding: 40px;
border-right: 1px solid #dbe0eb;
border-bottom: 1px solid #dbe0eb;
border-left: 1px solid #dbe0eb;
}
</style>
<ul class="c-tabs">
<li class="active">
<a href="#">Report</a>
</li>
<li>
<a href="#">Variations
<div class="c-dot-notification"></div>
</a>
</li>
<li>
<a href="#">Basic information</a>
</li>
<li class="active">
<a href="#">Multi<br />Line</a>
</li>
<li>
<a href="#">Multi<br />Line
<div class="c-dot-notification"></div>
</a>
</li>
</ul>
<div class="c-tab-content">
<div class="c-tab-pane active">
<div class="tab-example-container">
Report
</div>
</div>
<div class="c-tab-pane">
<div class="tab-example-container">
Variations
</div>
</div>
<div class="c-tab-pane">
<div class="tab-example-container">
Basic Information
</div>
</div>
</div>Bar styled tabs
Bar-styled tabs
sass:
.bar-tab-example-container
border-right: 1px solid #dbe0eb
border-bottom: 1px solid #dbe0eb
border-left: 1px solid #dbe0eb
.bar-tab-example-tab-content
padding: 40px
.bar-tab-example-container
ul.c-tabs--bar
li.active
a href="#"
i.kzicon.kzicon-chart
| Report
li
a href="#"
.c-message-bubble.-unread
.c-message-bubble__number 7
| New messages
li
a href="#"
.c-message-bubble.-empty
| No messages
li
a href="#"
.c-message-bubble
.c-message-bubble__number 7
| No messages
.c-tab-content
.c-tab-pane
.bar-tab-example-tab-content Report
.c-tab-pane.active
.bar-tab-example-tab-content Variations
.c-tab-pane
.bar-tab-example-tab-content Basic information
.c-tab-pane
.bar-tab-example-tab-content Basic information
<style type="text/css">
.bar-tab-example-container {
border-right: 1px solid #dbe0eb;
border-bottom: 1px solid #dbe0eb;
border-left: 1px solid #dbe0eb;
}
.bar-tab-example-tab-content {
padding: 40px;
}
</style>
<div class="bar-tab-example-container">
<ul class="c-tabs--bar">
<li class="active">
<a href="#"><i class="kzicon kzicon-chart"></i>Report</a>
</li>
<li>
<a href="#">
<div class="c-message-bubble -unread">
<div class="c-message-bubble__number">
7
</div>
</div>
New messages</a>
</li>
<li>
<a href="#">
<div class="c-message-bubble -empty"></div>
No messages</a>
</li>
<li>
<a href="#">
<div class="c-message-bubble">
<div class="c-message-bubble__number">
7
</div>
</div>
No messages</a>
</li>
</ul>
<div class="c-tab-content">
<div class="c-tab-pane">
<div class="bar-tab-example-tab-content">
Report
</div>
</div>
<div class="c-tab-pane active">
<div class="bar-tab-example-tab-content">
Variations
</div>
</div>
<div class="c-tab-pane">
<div class="bar-tab-example-tab-content">
Basic information
</div>
<div class="c-tab-pane">
<div class="bar-tab-example-tab-content">
Basic information
</div>
</div>
</div>
</div>
</div>