Skip to main content
Slices are the building blocks of an Architect page. Think of them as reusable page components (text, images, tables, testimonials, CTAs) that the agent assembles into a full page based on your page context.

TextContainer

Screenshot 2026-02-01 at 17.35.21.png Best Used For: Rendering formatted text content with markdown support including headings, bold, italic, links, lists, and inline code. Supports [keyword] highlighting for interactive elements. This is the foundational component for any text-heavy content.

ImageContainer

Screenshot 2026-02-01 at 17.34.53.png Best Used For: Displaying responsive images with optional alt text for accessibility. Supports size variants:
  • small: 60% width, centered
  • medium: 100% width (default)
  • large: 60vw (breaks out of container)
  • full: 100vw (full bleed)

Table

Screenshot 2026-02-01 at 17.36.26.png Best Used For: Organizing and displaying structured, tabular data with column headers and rows. Ideal for pricing comparisons, feature matrices, specifications, or any two-dimensional data that benefits from a grid layout with striped rows and hover effects.

FeatureCards

Screenshot 2026-02-01 at 17.34.29.png Best Used For: Presenting 2-6 features, benefits, or value propositions in a scannable card grid layout (up to 3 per row). Each card contains:
  • Headline (2-5 words)
  • Content description (1-2 sentences)
  • Optional icon
  • Optional feature image (placeholder { category: "product" | "brand" } or resolved image asset)
Supports imageMode: fill (photos) or contain (diagrams/logos).

TestimonialCarousel

Screenshot 2026-02-01 at 17.50.28.png Best Used For: Adding social proof through rotating customer testimonials displayed as a horizontal carousel with quote styling. Each testimonial includes:
  • Quote text (15-40 words, customer’s voice)
  • Author name
  • Optional title/role
  • Optional company name
Includes navigation dots for multiple testimonials.

CallToActionCard

Screenshot 2026-02-01 at 17.20.06.png Best Used For: Creating a prominent conversion point with a bold headline (5-10 words), supporting description (1-2 sentences), and an action button. Actions can be:
  • open-url: Navigate to a URL
  • form: Open an email capture form modal

StatsCards

Screenshot 2026-02-01 at 17.32.02.png Best Used For: Displaying 2-4 highlighted statistics as large, prominent numbers with labels. Builds credibility by making abstract benefits tangible (e.g., “10K+” Active Users, “99.9%” Uptime, “$2M” Revenue Generated). Values can include formatting characters.

LogoMarquee

Screenshot 2026-02-01 at 17.50.07.png Best Used For: Building trust and credibility through a continuously scrolling banner of customer/partner logos (similar to “Trusted by…” sections). Logos are displayed with a grayscale filter for visual consistency. Supports speed control and per-item duration for fine-tuning.

Frame

Screenshot 2026-02-01 at 17.43.31.png Best Used For: Creating collapsible, expandable sections that organize related content under a header title. Frames can contain child components and are ideal for:
  • FAQ-style expandable sections
  • Progressive disclosure of detailed information
  • Grouping related content with show/hide functionality
Properties: id, title, collapsible, defaultOpen.

FrameList

Screenshot 2026-02-01 at 17.32.28.png Best Used For: Grouping multiple Frame components with tighter spacing. Use when frames should appear closer together as a cohesive unit (e.g., a series of FAQ items or related expandable sections).

Threads (previously Branching)

Screenshot 2026-02-01 at 17.33.27.png Best Used For: Enabling conversation continuation and user interaction.
  • Presents a question with 2-4 selectable options
  • Each option has a label and action
  • Qualifies users by gathering information (company size, needs, budget)
  • Dynamically routes users to appropriate content paths