Boxes are a type of view that create distinct, logical groupings of controls, text fields, and other interface elements. For example, the content of a popup or popout may appear in a box. A box consists of a head area, a body area and a foot area. The head area may show a title and general controls — for example to close the popup. The body area lets the user view and interact with content. It is scrollable. The foot area may provide further information or interaction with the body's content — for example page numbers and page controls. The foot area is optional. Use the .{box}--content class for padding if needed.

Source Code

To initialize the messages on this site we used this piece of less.

.box { .genericBox(); }

Default box

This is a standard box.

Standard Box Head
Standard Box Body
Standard Box Foot