# Blocks overview

The **Blocks** panel groups blocks into **Basic**, **Form fields**, **Media**, **Layout**, **Advanced** and **Post**. This page lists each block under its group. The names used by the SDK and the API are in the [Block reference](/docs/developers/blocks-reference).

## Basic

| Block | Use it for |
| --- | --- |
| Heading | A title or section name, at a level you choose |
| Paragraph | Body text |
| Button | One link styled as a button. Inside a form, it can send the form |
| Buttons | A row of buttons |
| Icon | A symbol from the icon sets |
| Badge | A small label above a heading, or a status |

## Form fields

| Block | Use it for |
| --- | --- |
| Form | The box that collects answers. Answers appear in Forms |
| Text field | One line: text, search, email, password, number, phone or URL |
| Text area | A longer message |
| Dropdown | One choice from a list |

See [Forms](/docs/building-pages/forms).

## Media

| Block | Use it for |
| --- | --- |
| Image | One picture |
| Gallery | Several pictures in a grid, each with an optional caption and link |
| Video | A video player |
| Audio | An audio player |
| Media & Text | A picture or video beside text |
| Cover | A picture or video with text over it, such as a banner |
| File | A link to a file to download |
| Logo cloud | Logos of customers or partners in a row or grid |

## Layout

| Block | Use it for |
| --- | --- |
| Spacer | Empty vertical space |
| Separator | A solid, dashed or dotted line across the content |
| Columns | Blocks side by side |
| Container | A box with a background, padding and a maximum width |
| Group | Blocks gathered in one layout box |
| Stack | Blocks stacked down the page, in a row, or layered |
| Header | The bar at the top of a site, with a name, links and buttons |
| Accordion | Questions or sections that open and close. Holds accordion items |
| Popup | A window over the page, opened by a button or link |
| Grid | Equal items side by side that wrap, such as cards or team members |
| Card | A box for a feature, plan or link, with anything inside |
| Steps | Numbered steps down the page or in a row. Holds steps |
| Tabs | Content that switches when a tab is chosen. Holds tabs |

## Advanced

| Block | Use it for |
| --- | --- |
| Quote | A quotation |
| List | A bulleted or numbered list |
| Code | Code with a language label and line numbers |
| Custom HTML | HTML you write yourself |
| Pullquote | A quotation given extra emphasis |
| Preformatted | Text that keeps its spaces and tabs |
| Table | Rows and columns of data |
| Markdown | Text written in Markdown |
| Search | A search button that opens site search. Visitors can also press Ctrl+K, or Command+K on a Mac |

## Post

These blocks show blog content. Use them in a blog's layout or on any page.

| Block | Use it for |
| --- | --- |
| Post Title | The title of the post |
| Post Excerpt | The post's short summary |
| Featured Image | The post's main picture |
| Post List | A list of posts, in a grid, list or card layout |
| Table of Contents | A list of the headings on the page |
| Author Box | The author's picture, name and bio |
| Post Comments | The approved comments and a form to write one |
| Post Navigation | Links to the previous and next posts |
| Post Info | The date, categories, tags and reading time |
| Reading Progress | A bar that shows how far the reader has scrolled |

## Blocks you do not drag in

- **Templates** are added from the **Templates** group under the block list. See [Templates and themes](/docs/building-pages/templates-and-themes).
- **Pre-designed blocks** are copied from the **Pre-designed blocks** group under the block list.

## Next steps

- [Make your first page](/docs/getting-started/first-page).
- [Forms](/docs/building-pages/forms).
- [Block reference](/docs/developers/blocks-reference) for SDK and API names.