---
layout: default
title: Blocks
permalink: /template-editor/blocks/
parent: Template Editor
has_children: true
has_toc: false
nav_order: 4
description: >-
  Block types available in the template editor.
---
# Blocks
{: .no_toc }
{: .fs-9 }

Blocks are the pieces that make up a template: text, images, shapes, HTML, and layout containers.
{: .fs-4 .fw-300 }

<hr>

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.

When a property can use a template variable, the property table shows the hard-hat indicator. See [Variables](/template-editor/variables/) for variable modes, preview values, and render-time values.