# Site Builder Markup

See [Avoiding Site Builder CSS](/themes-and-custom-templates/site-builder-markup/avoiding-site-builder-css.md) for more information on what you should avoid when adding your own custom styles.

## Markup Details

### Page

A page is a grid of modules that are grouped into rows, columns, and positions.

* "Columns Area" contains "Rows"
* "Rows" which contain "Columns"
* "Columns" contain "Modules"

### Columns Area

This is the main "Site Builder" zone that contains all the rows, columns and modules that you can added to a page

```
<div class="columns" class="columns-inner clearfix">
```

### Rows

These are block-level elements that are stacked on top of each other

```
<div class="sb-row">
```

### Columns

These are percentage-width elements that are floated left within a Row

```
<div class="sb-col" style="width:50%">
  ...
</div>
<div class="sb-col" style="width:50%">
  ...
</div>
```

### Modules

These are the individual modules that contain the content added to the page

| Class or ID              | Type  | Description                                                                                                                      |
| ------------------------ | ----- | -------------------------------------------------------------------------------------------------------------------------------- |
| `.sb-module`             | class | This is the same for all modules                                                                                                 |
| `.sb-<module_name>`      | class | This variable class is set based on the type of module (i.e. `.sb-formbuilder` or `.sb-content`)                                 |
| `#sb-module-<module_id>` | id    | This variable id is unique to this particular module - This will not be repeated on the same page or any other page on the Site. |

```
<div id="sb-module-<module_id>" class="sb-module sb-<modulename>">
</div>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.devhub.com/themes-and-custom-templates/site-builder-markup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.