# Blocks

Blocks are the pieces that make up a template: text, images, shapes, HTML, and layout containers.

Add blocks from the left sidebar. Once a block is on the canvas, select it to edit its properties in the right sidebar.

Blocks can sit directly on the canvas or inside panels. Panel blocks are useful when a group of blocks should move, size, or flow together.

## Block Types

| Block | Best for |
| --- | --- |
| [Rich Text](/template-editor/blocks/rich-text/) | Text with varied typography and Handlebars composition |
| [Simple Text](/template-editor/blocks/simple-text/) | Text with one shared style, auto font sizing, and direct templating |
| [Image](/template-editor/blocks/image/) | Media library images, image URLs, and Pexels stock photos |
| [Shape](/template-editor/blocks/shape/) | Rectangles, circles, triangles, stars, and simple graphic marks |
| [HTML](/template-editor/blocks/html/) | Custom markup inside a visual template |
| [Free Panel](/template-editor/blocks/free-panel/) | A grouped area where children keep free positioning |
| [Flex Panel](/template-editor/blocks/flex-panel/) | Rows, columns, and dynamic stacks |
| [Grid Panel](/template-editor/blocks/grid-panel/) | Two-dimensional flow layouts |
| [Table Panel](/template-editor/blocks/table-panel/) | Explicit row and column placement |

## Common Properties

Most blocks can be styled with backgrounds, borders, shadows, sizing, and positioning. Individual block pages call out the properties that are specific to that block.

Property tables identify fields that support variables. In the editor, these fields have a hard-hat control. See [Variables](/template-editor/variables/) for variable modes, preview values, and render-time values.