> ## Documentation Index
> Fetch the complete documentation index at: https://docs.figfunnels.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Components

> Explore the built-in components available in the site editor.

The site editor provides a set of built-in components organized into four categories. Drag any component from the left panel onto the canvas to add it to your page.

## Essentials

<CardGroup cols={2}>
  <Card title="Section" icon="square">
    A full-width container that acts as a page section. Use it to group related content and control the section's background color, padding, and width. Sections are the primary building blocks for organizing page structure.
  </Card>

  <Card title="Heading" icon="heading">
    A styled text heading (H1–H6). Use it for page titles, section headers, or any prominent text. You can control font, size, weight, color, and alignment.
  </Card>

  <Card title="Text" icon="align-left">
    A rich text block for body copy, descriptions, or supporting content. Supports font, size, color, line height, and alignment controls.
  </Card>

  <Card title="Button" icon="mouse-pointer-click">
    A clickable button with an action such as linking to a URL, moving to another funnel page, scrolling to a page section, or opening the page popup. Supports solid, outline, ghost, and link variants with full color and size customization.
  </Card>

  <Card title="Link" icon="link">
    A clickable text link with the same action, destination, typography, sizing, and spacing controls as Button, optional underline control, plus an optional icon that can sit left, right, above, or below the text.
  </Card>

  <Card title="Image" icon="image">
    Displays an image from your content library or an external URL. You can set dimensions, object fit, border radius, and alt text for accessibility.
  </Card>

  <Card title="Video" icon="play-circle">
    Embeds a video from your content library or a hosted video URL. Supports autoplay, loop, and muted playback options.
  </Card>

  <Card title="Embed" icon="code">
    Embeds external content via a URL (iframe) or raw HTML snippet. Use it to add third-party widgets, maps, or any content you want to include from an external source.
  </Card>

  <Card title="Icon" icon="smile">
    Renders a single icon from the built-in icon library. Useful for decorative elements, feature callouts, or inline visual accents.
  </Card>
</CardGroup>

<Note>
  The Embed component accepts either a URL (rendered as an iframe) or an HTML embed code. Paste a valid `https://` URL or raw HTML into the embed value field in the properties panel.
</Note>

## Layout

<CardGroup cols={2}>
  <Card title="Container" icon="box">
    A generic wrapper that constrains its contents to a maximum width and centers them. Use it to create centered content blocks within a full-width section.
  </Card>

  <Card title="Divider" icon="minus">
    A horizontal rule for visually separating sections of content. Supports color, thickness, and spacing customization.
  </Card>

  <Card title="Spacer" icon="move-vertical">
    An invisible block that adds vertical space between components. Set the height for desktop and mobile independently.
  </Card>

  <Card title="Tabs" icon="layout-panel-top">
    A tabbed content area. Add multiple tabs and place any other components inside each tab. Visitors click the tab labels to switch between content panels.
  </Card>

  <Card title="Accordion" icon="chevrons-up-down">
    A collapsible content block. Add items with a title and body; visitors expand and collapse each item. Useful for FAQs, feature lists, and step-by-step instructions.
  </Card>
</CardGroup>

## Layout presets

Layout presets create multi-column grids with pre-configured proportions, saving you from building column structures manually.

| Component               | Columns         | Use case                                 |
| ----------------------- | --------------- | ---------------------------------------- |
| **Two Column Layout**   | 2 equal columns | Side-by-side content, image + text pairs |
| **Three Column Layout** | 3 equal columns | Feature grids, icon rows                 |
| **Four Column Layout**  | 4 equal columns | Dense feature lists, icon + label grids  |

Each column in a preset can hold any other component. Columns stack vertically on mobile.

## Conversion blocks

Conversion blocks are purpose-built components for driving visitor actions.

<CardGroup cols={2}>
  <Card title="Form" icon="clipboard-list">
    Embeds a lead capture form on your page. Select a form you created in **CRM → Forms**. On submission, the visitor's data is saved as a contact record in the CRM and the visitor advances to the next step in your funnel. See [Forms](/editor/forms) for full details.
  </Card>

  <Card title="Checkout" icon="credit-card">
    Renders a Stripe embedded checkout panel for direct purchase on the page. Link it to a Stripe-synced offer price from **Revenue**. The full checkout experience — including card fields — appears inline without redirecting the visitor.
  </Card>

  <Card title="Progress Bar" icon="bar-chart-horizontal">
    Displays a visual progress indicator. Use it to show visitors how far they are through a multi-step funnel and to reinforce forward momentum.
  </Card>

  <Card title="Countdown Timer" icon="timer">
    Shows a live countdown to a deadline. Use it for time-sensitive offers, launch dates, or urgency-driven calls to action.
  </Card>

  <Card title="Number Counter" icon="hash">
    Animates a number counting up to a target value. Use it to highlight statistics, social proof numbers, or milestone figures.
  </Card>

  <Card title="Testimonial" icon="quote">
    Displays a customer testimonial with a quote, author name, title, optional avatar image, optional star rating, and configurable quote marks. Supports centered, left-aligned, and card layouts.
  </Card>
</CardGroup>

## Saved components

You can save any component configuration to reuse it across pages.

<Steps>
  <Step title="Select a component">
    Click the component on the canvas to select it.
  </Step>

  <Step title="Save the block">
    Open the component's context menu (right-click or the menu icon in the action bar) and choose **Save block**. Give it a name.
  </Step>

  <Step title="Reuse on other pages">
    Open the **Saved** tab in the left panel. Saved blocks are listed under **This funnel** (available only within the current funnel) or **Global** (available across all funnels). Drag a saved block onto the canvas to insert it with all its original properties.
  </Step>
</Steps>

<Tip>
  Use saved blocks for repeated elements like headers, footers, or offer sections that should look consistent across multiple pages.
</Tip>