- Components Guidelines
- Wells
- Font Color
- Special Links
- Special Images
- Ribbons
- Stats & Charts
- back
Wells
To see some samples of forms in combination with wells go to forms sample.
Primary colors:
.well-kabaBlue
.well-kabaMiddleBlue
.well-kabaLightBlue
Gray:
.well-kabaDarkGray
.well-kabaTextGray
.well-kabaMiddleGray
.well-kabaLightGray
.well-kabaBackgroundGray
.well-kabaWhite
Secondary colors:
.well-kabaOrange
.well-kabaGreen
.well-kabaLightYellow
.well-kabaRed
Gradients Primary colors:
.well-kabaBlue
.well-kabaMiddleBlue
.well-kabaLightBlue
Gradients Gray:
.well-kabaDarkGray
.well-kabaTextGray
.well-kabaMiddleGray
.well-kabaLightGray
.well-kabaBackgroundGray
.well-kabaWhite
Gradients Secondary colors:
.well-kabaOrange
.well-kabaGreen
.well-kabaLightYellow
.well-kabaRed
<!-- without gradient -->
<div class="well well-kabaBlue">
</div>
<!-- with gradient -->
<div class="well well-kabaBlue gradient">
</div>
Fonts
font colors:
This is '.text-kabaBlue'
This is '.text-kabaDarkGray'
This is '.text-kabaTextGray'
This is '.text-kabaOrange or .text-warning'
This is '.text-kabaRed or .text-error'
This is '.text-kabaGreen or .text-success'
This is '.text-white'
This is '.text-kabaTextGray'
This is '.text-kabaOrange or .text-warning'
This is '.text-kabaRed or .text-error'
This is '.text-kabaGreen or .text-success'
<div class="text-kabaBlue">
</div>
Special forms of links
Shortcuts
variants:
selected:
disabled:
<div class="shortcuts">
<!-- middle blue -->
<a href="#">
<div class="shortcut">
<i class="shortcut-icon icon-envelope"></i>
<div class="shortcut-label">some shortcut</div>
</div>
</a>
<!-- light gray -->
<a href="#">
<div class="shortcut shortcut-gray">
<i class="shortcut-icon icon-home"></i>
<div class="shortcut-label">another shortcut</div>
</div>
</a>
<!-- orange -->
<a href="#">
<div class="shortcut shortcut-orange">
<i class="shortcut-icon icon-cloud"></i>
<div class="shortcut-label">another shortcut</div>
</div>
</a>
<!-- selected eg. middle blue -->
<a href="#">
<div class="shortcut selected">
<i class="shortcut-icon icon-envelope"></i>
<div class="shortcut-label">some shortcut</div>
</div>
</a>
<!-- disabled eg. middle blue -->
<a href="#">
<div class="shortcut disabled">
<i class="shortcut-icon icon-envelope"></i>
<div class="shortcut-label">some shortcut</div>
</div>
</a>
</div>
Links with arrow
default (orange):
<!-- default orange -->
<a href="#" class="kaba-link">link</a>
<!-- kaba blue -->
<a href="#" class="kaba-link kaba-link-kabaBlue">link</a>
<!-- kaba middle blue -->
<a href="#" class="kaba-link kaba-link-kabaMiddleBlue">link</a>
<!-- kaba dark gray -->
<a href="#" class="kaba-link kaba-link-kabaDarkGray">link</a>
<!-- kaba text gray -->
<a href="#" class="kaba-link kaba-link-kabaTextGray">link</a>
news list
<div class="news-list">
<h4>Latest News</h4>
<ul>
<li><a href="#">some news item</a></li>
<li><a href="#">some news item</a></li>
<li><a href="#">some news item</a></li>
<li class="news-end"><a href="#">more news</a></li>
</ul>
</div>
Images
image with caption
Reader
This is some description text.
Reader
This is some description text.
Reader
This is some description text.
<!-- default (blue) -->
<div class="img-caption">
<img src="path/img.png">
<div class="caption">
<h6>title</h6>
<p>description</p>
</div>
</div>
<!-- orange -->
<div class="img-caption img-caption-orange">
<img src="path/img.png">
<div class="caption">
<h6>title</h6>
<p>description</p>
</div>
</div>
<!-- gray -->
<div class="img-caption img-caption-gray">
<img src="path/img.png">
<div class="caption">
<h6>title</h6>
<p>description</p>
</div>
</div>
Ribbons
Add an ribbon icon to widget-header:
7
default ribbon
5
success ribbon
3
error ribbon
4
9
2
<!-- widget -->
<div class="widget">
<div class="widget-header">
<i class="icon-envelope-alt"></i>
<small class="ribbon">5</small>
</i>
<h3>Title</h3>
</div>
<div class="widget-content">content...</div>
</div>
<!-- success -->
<i class="icon-envelope-alt icon-large"></i>
<small class="ribbon ribbon-success">5</small>
</i>
<!-- error -->
<i class="icon-envelope-alt icon-large"></i>
<small class="ribbon ribbon-error">5</small>
</i>
Stats & Charts
Stats
unselectable
2some title
14some title
22:00PMsome title
22:00PMsome title
selectable
2some title
14some title
22:00PMsome title
22:00PMsome title
<div class="stats">
<!-- stat with icon -->
<div class="stat">
<span class="stat-value">15<i class="icon-envelope stat-icon"></i></span>
some title
</div>
<!-- stat with text only -->
<div class="stat">
<span class="stat-text">
<span class="stat-value">22:00<span class="small">PM</span></span>
</span>
some title
</div>
<!-- stat selectable -->
<div class="stat selectable">
<span class="stat-value">15<i class="icon-envelope stat-icon"></i></span>
some title
</div>
</div>