Loading...

Tile boxes View all kinds of Tile boxes examples below.

Tile boxes

Tile boxes can be used to show all kinds of informations about stuff in your application.

Common styles

Framework inherited

The core color helpers can be applied to all kind of elements from buttons to icons, headers, headings, etc. They do not change when you switch to a different theme from the same template.

Theme inherited

These are the template default color schemes and are used site wide to consistently style common elements. For the primary color you must add .bg-primaryand for the secondary color you must add .ui-state-default. Note that theme two styles change based on what color scheme you choose for your template.

Basic

Use the markup below to create basic tile boxes. You can remove any element you don't need from them.

YoY Growth
+55%
$378
YoY Growth
+55%
$378
YoY Growth
+55%
$378

Additional fields

Below you will find tile boxes examples that have additional fields. To create these kind of boxes, add the .tile-box-altCSS class to the .tile-boxelement, like in the examples below.

YoY Growth
$378
+7,6% new users in the first quarter
YoY Growth
$378
+7,6% new users in the first quarter
YoY Growth
$378
+7,6% new users in the first quarter

Button tiles

You can transfrom tile elements into clickable buttons by adding the tile CSS classes, the .btnCSS class to a link element.

Tiles with links

These are regular tile boxes with links inside. The examples below have a "view details" link in the footer.

YoY Growth
$378
+7,6% new users in the first quarter
view details
YoY Growth
$378
+7,6% new users in the first quarter
view details
YoY Growth
$378
+7,6% new users in the first quarter
view details
Online
Idle
Offline
Cloud status
Latest transfers
Tasks for today
Pending notifications New