> For the complete documentation index, see [llms.txt](https://analog.groupthought.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://analog.groupthought.com/core-concepts/model.md).

# The section & block model

How Analog builds pages from sections, blocks, and nested container blocks, and when to use a purpose-built section.

Every Analog page is a stack of sections. Sections hold blocks, and container blocks hold more blocks. Once you know those three parts, you can read any section in the theme.

## Sections, blocks, and containers

A layout is a tree. A section holds blocks, and a container block holds child blocks at any depth. Product pages, heroes, and footers all use this structure.

## The three primitives

| Primitive       | What it is                                                                                              | Notes                                                                                   |
| --------------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
| Section         | A full-width band on the page. You add, reorder, and remove sections on a template.                     | Sets page-level width, vertical spacing, and a color scheme for its blocks.             |
| Block           | A piece of content inside a section, such as text, an image, a button, a product card, or a form input. | In source these are files prefixed with `_` (for example `_inline-text`, `_accordion`). |
| Container block | A block whose only job is to hold and arrange other blocks.                                             | Containers make layouts trees instead of flat lists.                                    |

A leaf block renders content. A container arranges its child blocks. Containers can hold other containers, so the layout can be nested as deeply as needed:

```
Section (Custom)
├─ Section title
└─ Accordions              ← container
   ├─ Accordion            ← container
   │  └─ Rich text         ← leaf
   └─ Accordion            ← container
      └─ Text              ← leaf
```

Settings follow the tree. A section value applies to every block inside it until a child block sets its own value. See [Global settings & local overrides](/core-concepts/settings-cascade.md).

## The container blocks

The container blocks are "Flexbox" for freeform layout, "Row" for a horizontal strip, "Frame" for layered content, "Text group" for text, "Grid auto" and "Grid editorial" for grids, and "Accordions" and "Tabs" for disclosure. See [Layout blocks](/building-pages/layout-blocks.md) for their settings.

## Reach for the purpose-built section first

Use a purpose-built section when one matches the content. It already handles the details that are easy to miss when rebuilding it: sliders break out of their container on mobile, page margins shrink on small screens, and card text keeps a minimum inset when the card gap is zero.

| Situation                   | Reach for                                                        |
| --------------------------- | ---------------------------------------------------------------- |
| Selling a product           | The [product page](/features/product.md)                         |
| Hero or promo banner        | A banner section ("Banner layers" when you need stacked content) |
| Media beside text           | A [Pair section](/building-pages/pair.md)                        |
| Collection or product strip | A [card section](/building-pages/cards.md)                       |
| Bespoke editorial content   | The [Custom section](/building-pages/custom-section.md)          |

## Don't rebuild existing sections

The Custom section includes every container and leaf block. Use it for editorial content that doesn't fit another section. Don't use it to rebuild a product layout or hero that Analog already includes. You would need to recreate its spacing, responsive behavior, and component wiring, and the copy will still behave differently from the built-in section.

The model branches into the Building pages:

* [Pair sections](/building-pages/pair.md): two columns with any two blocks
* [The Custom section](/building-pages/custom-section.md): a vertical stack of blocks
* [Card sections](/building-pages/cards.md): product, collection, and article cards in grids and sliders
* [Backgrounds](/building-pages/backgrounds.md): background media, overlays, and layers
* [Layout blocks](/building-pages/layout-blocks.md): container blocks and nesting
* [Developer blocks](/developer-platform/blocks.md): Custom liquid and other developer blocks

## See also

* [Global settings & local overrides](/core-concepts/settings-cascade.md): how settings follow the tree
* [Scaling: size, space & rhythm](/core-concepts/scaling.md): the scale behind gaps and spacing
* [Color](/core-concepts/color.md): the schemes a section applies to its blocks