Components Library
The Components Library provides a catalog of ready-made UI blocks — navigation bars, hero sections, card grids, pricing tables, footers, and more. Each component inserts as fully editable HTML that you can style and customize to match your project.
Opening the Components panel
Click the Components icon (puzzle-piece icon) in the left toolbar. The panel opens showing a grid of component thumbnails organized by category.
You can also right-click any empty area on the canvas and choose Insert Component to open the panel in a floating mode.
Framework-specific vs. universal components
The Components Library contains two types of components:
Framework-specific components use the class system and JavaScript of a particular framework (Foundation, Bootstrap, or Materialize). They only work correctly when your project includes that framework’s CSS and JS. A small badge on the thumbnail indicates the framework.
Universal components are built with plain HTML and CSS — no framework dependency. They work in any project regardless of framework choice.
Component categories
| Category | What’s inside |
|---|---|
| Navigation | Top navbars, sticky headers, off-canvas menus |
| Hero | Full-width banners, split layouts, video backgrounds |
| Cards | Content cards, team member cards, feature cards |
| Forms | Contact forms, newsletter signups, multi-step forms |
| Pricing | Single-tier and comparison pricing tables |
| Testimonials | Quote blocks, review grids, star ratings |
| Footers | Single-column and multi-column footer layouts |
| Call to action | Banner CTAs, inline CTAs, pop-up style prompts |
| Gallery | Masonry grids, lightbox galleries, sliders |
Inserting a component
-
Find the component
Browse by category or type a name into the search box at the top of the panel. The list filters in real time.
-
Preview it
Hover over a thumbnail to see the component name and a brief description. Click the thumbnail to open a larger preview.
-
Drag or double-click to insert
Drag the component thumbnail directly onto the canvas to place it at a specific position, or double-click the thumbnail to append it at the bottom of the current page.
-
Customize
Once on canvas, click any element inside the component to select and edit it — text, images, colors, and links are all editable in the normal way.
Searching for components
Type any keyword in the search box — “footer”, “pricing”, “contact” — and the panel shows all matching components across all categories. This is the fastest way to find a specific block when you already know what you need.
Components vs. Symbols
It is important to understand the difference between a component and a Symbol:
Component (one-time insert): When you insert a component, you get an independent copy of the HTML. Editing this copy does not affect other instances anywhere in your project. Use components when you want a starting point that you will then customize uniquely.
Symbol (live-synced reusable): A Symbol is an element or group you save and reuse across multiple pages. Edit the Symbol definition once and every instance across your site updates automatically. Use Symbols for your site-wide header, footer, and any repeating UI that must stay consistent.
