Blocks

Find what each block does, how to use it, and the properties available to AI agents.

Layout

• Section — Group a complete area of your page, with its own background, spacing and colour theme.
• Rows and columns — Arrange blocks in a row or a column and control how they line up at different screen sizes.
• Divider — Separate adjacent content with a horizontal or vertical line.
• Spacer — Add a deliberate gap between elements when a separate spacing block is useful.
• Card — Keep a related heading, description and other blocks together on a styled surface.

Text

• Rich text — Write headings, paragraphs, lists and links together in one editable text block.
• Badge — Add a short, non-clickable label for a category, service type or useful piece of context.
• Text and headings — Style a single heading or text element with precise size, weight, alignment and colour.
• Star rating — Display a read-only star score with adjustable size and colour.
• Number counter — Present a numeric fact with an optional prefix, suffix and count-up animation.

Navigation

• Button — Give visitors a clear next step, such as opening your contact page or booking link.
• Header menu — Help visitors move around your website with a title, logo, page links and optional action buttons.
• Breadcrumbs — Show links to parent pages derived from a page path.

Media

• Image — Show a photograph or illustration with control over its size, cropping and optional destination.
• Video — Add a video with playback, aspect-ratio and control settings.
• Icon — Use a symbol, uploaded icon or initials to support a short piece of content.
• Scrolling images — Move a row of images or logos across the page.
• Image gallery — Show several images as a gallery or carousel, with optional previews.

Collections

• Data cards — Display structured records as a filterable grid of cards.
• FAQ accordion — Let visitors expand questions to read the answers without showing every answer at once.
• Tabs — Switch between related descriptions and their images or videos.
• Page list — Show pages from your website using the configured page query and filters.
• Product showcase — Show existing products or service offers from the website’s Products collection.
• Testimonial wall — Display approved customer testimonials in a chosen layout.

Forms

• Email signup — Collect an email address and add it to the website’s member list.
• Contact form — Collect a visitor’s email and the details you need to respond to an enquiry.

Integrations

• Embed — Place a trusted third-party widget or HTML embed inside your page.

Specialised

• Pricing list — Render the built-in Pineapple subscription pricing list.
• AI prompt input — Offer a prompt input that sends visitors into a configured AI website-generation flow.

For AI agents

Use the reference matching your renderer version. Editor choices and defaults are evidence, not a complete runtime type contract. Preserve unrelated properties and content.

CustomBlock is a context-restricted extension point, not a general public block API. Existing tutorials remain available alongside this reference.