Box

PixelAdmin's boxes are flexible tool to build content blocks.

The main advantages of the boxes over regular divs:

Boxes can be represented by several core classes:

To see how it works, look at the examples below.

Simple cells

Cell #1
Cell #2
Cell #3

Several rows

Box rows must contain equal number of cells.

Cell #1
Cell #2
Cell #3
Cell #4
Cell #5
Cell #6

Structure variations

If you want add extra structure to a box, you need to use a .box-container element.

The first row contains 1 cell, the second row contains 3 cells:

Cell #1
Cell #2
Cell #3
Cell #4

The first row contains 2 cells, the second row contains 4 cells:

Cell #1
Cell #2
Cell #3
Cell #4
Cell #5
Cell #6

The first cell contains 1 row, the second cell contains 3 rows:

Cell #1
Cell #2
Cell #3
Cell #4

The first cell contains 2 rows, the second cell contains 4 rows:

Cell #1
Cell #2
Cell #3
Cell #4
Cell #5
Cell #6

Content alignment

Use utility classes to align content inside a box cell.

Cell #1
Cell #2
Cell #3

With utility classes

  11
Overview
Your account statistics
12
PURCHASES
17
REVIEWS
49
LIKES
203
FRIENDS
1056
POINTS
MORE  >
VISITORS
6%
987

Icons

When you're using icons in box cells, add the .box-icon class to an icon element.

Without .box-icon class
With .box-icon class

Background icon

You can add background icon to a box cell. Change the icon position by adding the .left, .right, .top, .middle and .bottom classes.

.left.top
.left.middle
.left.bottom
.right.top
.right.middle
.right.bottom

Responsivity

Use the regular Bootstrap's responsive classes with box cells.

First-level cells will be stacked on screen sizes up to large, second-level cells will be stacked on screen sizes up to small:

Cell #1
Cell #2
Cell #3
Cell #4