On this page

'Layout box' use cases

Macro options

The Linchpin Layout box macro offers several customization options.

Background color

Color of the box background.

Input options:

• Normal words ("black")
  or
• hex value ("#000000")

Text color

Color of the text inside the box.

Input options:

• Normal words ("black")
  or
• hex value ("#000000")

Width

Set the width of the box.

Outer spacing

Choose the margin of the box. Outer spacing defines the distance between your box and other elements.

You can input the outer spacing in two ways:

1. Single number: 10px
   → 10 pixels outer spacing in every direction (top, right, bottom, left).
   
   
2. Four numbers: 10px 0px 10px 0px
   → Every number stands for a direction. The directions are top, right, bottom, left. This example would result in an outer spacing of 10px on top and bottom and no outer spacing on the sides.

Inner spacing

Choose the inner spacing of the box. Inner spacing defines the distance between your content (for example text) and the border of the box.

You can input the inner spacing in two ways:

1. Single number: 10px
   → 10 pixels inner spacing in every direction (top, right, bottom, left).
   
   

2. Four numbers: 10px 0px 10px 0px
   → Every number stands for a direction. The directions are: top, right, bottom, left. This example would result in an inner spacing of 10px on top and bottom and no inner spacing on the sides.

Alignment of the box

You can set floats for every Layout box. If you set several boxes to float left, and use a wrapper, those boxes will appear as columns.

Use box as a wrapper

Set up a box as wrapper if your layout should contain multiple columns. It functions as a container for other boxes. The wrapper box contains only other Layout boxes. Those will appear as columns, as long as you set them to float left.

CSS class

You can input your own CSS classes here to add additional styles like shadows, borders, etc.