Anole Demo - Boxes

anole docs - boxes

an-box

Use

.an-box

to turn divs and other block level elements into card-like containers for other content.

.an-box

will take care of line spacing, padding and margins. However, if you need anything extra, such as a definite width, you will need a helper class such as

.an-35p

(for example).

.an-box

with no further content but this text. This box also has the class

.an-35p

so that it only takes up 35% of the page container's width.

.an-box

with no further content but this text. This box also has the class

.an-45p

so that it only takes up 45% of the page container's width.

.an-box

with

.an-center

applied. With this combination, you can center the content of your

.an-box.

You will need another helper class to center text itself. See TODO

This will be under text formatting in the future.

See text formatting for more information.

for this.

NOTICE: When using .an-label within .an-center, the contents of

.an-center

will need to be wrapped in another element, such as a span.

an-infobox

Use

.an-infobox

to as an alternative, for highlighting important details, for instance.

.an-infobox

an-sunkenplace

A container that appears engraved into the page.
The name should ring a bell.

an-sunkenplace