Different Slices Examples

Examples of every slice type available for Architect pages

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

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

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

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

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

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

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

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

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

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

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)

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

---