# Components

##### Builder ships with built-in Twig components. You drag them in the visual editor; each has its own settings panel.

#### Sections and layout

| Component | Notes |  
|-----------|--------|  
| Section | Generic container; accepts nested elements |  
| Header | Layout area (e.g. for Menu) |  
| Footer | Layout area |  
| Hero | Section preset |  
| CTA | Call-to-action preset |  
| FAQ | FAQ preset |  
| Pricing | Pricing preset |  
| Team | Team preset |

#### Elements

Place these inside a Section or Grid:

| Component | Purpose |  
|-----------|---------|  
| Grid | Multi-column container |  
| Headline | Heading (H1–H6) |  
| Text | Body paragraph |  
| Image | Image / asset |  
| Button | Link button |  
| Menu | Navigation links |  
| HTML | Raw HTML when needed |  
| Craft Field | Display a Craft entry field value |

##### Working with Grid

1\. Add a Grid inside a Section.  
2\. Set columns in Grid settings.  
3\. Drop content into each column / grid item.

##### Menu

Use Menu inside a Header (or Section) to build navigation links (label + URL items).

##### Craft Field

Use Craft Field when the layout should pull live entry data (title, custom fields, etc.) instead of static text. This is useful for entry-driven pages.

##### HTML

HTML is an escape hatch for custom markup. Prefer built-in components when possible so styling and structure stay consistent.

##### Custom components

Developers can register additional components via the Builder SDK or by adding component folders. That is covered in the developer SDK documentation, not this user guide.