> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Use Boxes to Structure Landing Pages

> Use boxes to group elements, control layout, and create structured, flexible landing page designs with precise spacing and alignment.

The Box element is one of the most important layout tools in LanderLab.

It allows you to group, organize, and control elements more precisely inside your page.

***

## What is a Box?

A Box is a container that holds other elements inside it.

You can place inside a box:

* Text
* Images
* Buttons
* Lists
* Other boxes

👉 Think of it as a wrapper that helps you structure your content.

<Note>
  Important Notes

  * Boxes are essential for structuring layouts
  * You can nest boxes for more flexibility
  * They help solve most alignment and spacing issues
</Note>

### How to Add a Box

* Open the left sidebar
* Go to **Layout**
* Drag **Box** into a section or column

***

## Why Boxes Are Important

Boxes give you more control over how elements are arranged.

You use them to:

* Group related elements together
* Align elements properly
* Create more advanced layouts
* Fine-tune spacing and positioning

👉 Most detailed layouts rely on boxes to work correctly.

***

## How Boxes Work

Structure example:\
Section → Columns → Box → Elements

* A box sits inside columns or sections
* Elements go inside the box
* You can place boxes inside other boxes for more control

***

## Layout Control

With a box selected, you can control:

* **Direction** → Row or column layout
* **Alignment** → Position elements (left, center, right)
* **Distribution** → Space elements evenly
* **Gap** → Space between elements

This is where most layout adjustments happen.

***

## Styling Options

Boxes also support:

* Backgrounds (color or gradient)
* Spacing (padding & margin)
* Borders and radius
* Shadows
* Width and height