UI Elements

Buttons

Classes

The Mosaic theme offers you new button classes that can be used along with the default Bootstrap 3 buttons:

Example
Green Blue Orange Red
<button type="button" class="btn btn-green">Green</button>
<button type="button" class="btn btn-blue">Blue</button>
<button type="button" class="btn btn-orange">Orange</button>
<button type="button" class="btn btn-red">Red</button>

Sizes

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

Example

Large Button Large Button

Default Button Default Button

Small Button Small Button

Extra Small Extra Small

<button type="button" class="btn btn-default btn-lg">Large button</button>
<button type="button" class="btn btn-green btn-lg">Large button</button>

<button type="button" class="btn btn-default">Default button</button>
<button type="button" class="btn btn-green">Default button</button>

<button type="button" class="btn btn-default btn-sm">Small button</button>
<button type="button" class="btn btn-green btn-sm">Small button</button>

<button type="button" class="btn btn-default btn-xs">Extra small button</button>
<button type="button" class="btn btn-green btn-xs">Extra small button</button>

Panels

While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.
In the Mosaic template we have added several new classes to the panel element. For full documentation on panels, please refer to the official Bootstrap page.

Example
Panel Title
Panel Content
Panel Title
Panel Content
Panel Title
Panel Content
Panel Title
Panel Content
<div class="panel panel-green"> ... </div>
<div class="panel panel-blue"> ... </div>
<div class="panel panel-orange"> ... </div>
<div class="panel panel-red"> ... </div>

Info Boards

You can emphasize some contents by wrapping it in a .info-board. Four classes are available:

Example

Info board title

Info board content

Info board title

Info board content

Info board title

Info board content

Info board title

Info board content

<div class="info-board info-board-green"> ... </div>
<div class="info-board info-board-blue"> ... </div>
<div class="info-board info-board-orange"> ... </div>
<div class="info-board info-board-red"> ... </div>

Navs

Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.

Tabs

Note the .nav-tabs class requires the .nav base class.

Example
Home tab content
Profile tab content
Message tab content
Settings tab content
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li>
<li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane active" id="home">Home tab content</div>
<div class="tab-pane" id="profile">Profile tab content</div>
<div class="tab-pane" id="messages">Message tab content</div>
<div class="tab-pane" id="settings">Settings tab content</div>
</div>

Pills

Take that same HTML, but use .nav-pills instead.

Example
Home tab content
Profile tab content
Message tab content
Settings tab content
<ul class="nav nav-pills">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li>
<li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane active" id="home">Home tab content</div>
<div class="tab-pane" id="profile">Profile tab content</div>
<div class="tab-pane" id="messages">Message tab content</div>
<div class="tab-pane" id="settings">Settings tab content</div>
</div>

Choose one of the four colors by adding an exta class:

Example
<ul class="nav nav-pills nav-pills-green"> ... </ul>
<ul class="nav nav-pills nav-pills-blue"> ... </ul>
<ul class="nav nav-pills nav-pills-orange"> ... </ul>
<ul class="nav nav-pills nav-pills-red"> ... </ul>

Headlines

Use the code below to add a headline on your page:

Example

Headline

<h2 class="headline text-color">
<span class="border-color">Headlines</span>
</h2>