Split Text + Image split-2col
static
A two-column content section pairing a text block (eyebrow label, heading, and body copy) on one side with a framed image on the other. Use it for story, mission, or feature explainer sections that need supporting copy next to a visual.
used on 21 pages
21 variants
from about
Preview: Static; sits on a light-blue background (bg-light-blue) as a text-left / image-right 2-col grid. The slide-to-top entrance classes assume elements animate in, so ensure they render visible in a standalone gallery.
4 editable slots
| eyebrow | text | Eyebrow Label — small all-caps kicker above the heading |
| heading | richtext | Heading — supports bold/italic emphasis spans |
| body | richtext | Body Copy — paragraph, supports inline bold |
| image | image | Feature Image — shown in a shadowed frame in the second column |
Product Carousel carousel
SwiperPlyr video
A horizontal Swiper carousel of product cards, each with a badge, title, blurb, a "Discover more" link, and an autoplaying hover video (or a static image), plus prev/next arrows and bullet pagination. Use it to showcase a product suite or a set of feature offerings as swipeable cards.
used on 13 pages
12 variants
from about
Preview: Needs Swiper init to slide (otherwise renders as a static overflowing row); HLS m3u8 videos require the Plyr/HLS player, so poster images (/images/zPLATFORM.webp etc.) act as the fallback; sits on a light-blue background.
4 editable slots
| eyebrow | text | Eyebrow label — small all-caps kicker (e.g. "Our products") |
| heading | text | Section heading (lead) — plain lead of the two-tone heading |
| headingEmphasis | text | Section heading (emphasis) — styled bold+italic tail of the heading |
| slides | list | Product slides — Repeatable image cards; each has label, title, body, url, image. |
FAQ Accordion accordion
webflow.js anim
A titled section of expand/collapse question and answer rows with a plus/minus toggle icon, used to answer common questions (pricing, product, support) without cluttering the page. Reach for it when you have a short list of recurring questions to surface near the bottom of a product or pricing page.
used on 7 pages
7 variants
from products/zedge
Preview: Needs webflow.js for the toggle; answers ship collapsed (inline height:0), so include the interaction script or manually open one row to show the pattern in a static gallery.
3 editable slots
| heading | text | Section heading |
| subtext | text | Intro line — short line under the heading |
| items | list | FAQ items — Repeatable; each item has a question and an answer. Toggle open/close on composed pages via zb-accordion.js. |
Tabbed Pricing Cards tabs
webflow.js anim
A three-column pricing section whose lead card toggles between billing options (On-Demand vs Reserved) with tabs, sitting beside additional plan cards, each showing a price, a checkmark feature list, and a CTA button. Use it to present GPU or product pricing tiers where one plan has multiple billing modes.
used on 2 pages
2 variants
from pricing
Preview: Tab switching needs webflow.js (w-tabs / w-tab-link); without it the first tab (On-Demand) shows as active by default. Static content, no CMS or form needed. Full-width 3-column grid on a light background.
23 editable slots
| tab1Label | text | Tab 1 label — e.g. On-Demand |
| tab1Price | text | Tab 1 price — e.g. $2.51 |
| tab1PriceUnit | text | Tab 1 price unit — e.g. / GPU-hour |
| tab1Features | list | Tab 1 features |
| tab1CtaLabel | text | Tab 1 CTA label |
| tab1CtaUrl | url | Tab 1 CTA link |
| tab2Label | text | Tab 2 label — e.g. Reserved |
| tab2Price | text | Tab 2 price |
| tab2PriceUnit | text | Tab 2 price unit |
| tab2Features | list | Tab 2 features |
| tab2CtaLabel | text | Tab 2 CTA label |
| tab2CtaUrl | url | Tab 2 CTA link |
| card2Eyebrow | text | Card 2 eyebrow — e.g. Coming Soon |
| card2Heading | text | Card 2 heading — e.g. NVIDIA H200 |
| card2Features | list | Card 2 features |
| card2CtaLabel | text | Card 2 CTA label |
| card2CtaUrl | url | Card 2 CTA link |
| card3Eyebrow | text | Card 3 eyebrow |
| card3Heading | text | Card 3 heading |
| card3Subheading | text | Card 3 subheading |
| card3Body | text | Card 3 body |
| card3CtaLabel | text | Card 3 CTA label |
| card3CtaUrl | url | Card 3 CTA link |
Rich Text Content Section prose
static
A generic rich-text content section for long-form body copy (legal, policy, case study, and article text), sitting on a light textured background and optionally topped with a heading and a single call-to-action button. Use it on text-heavy pages that need readable prose, or as a simple heading-plus-button content band.
used on 10 pages
10 variants
from terms
Preview: Sits on a light "cloud" textured background; the canonical instance is only a heading plus one button, so add sample body copy to demonstrate the actual prose/rich-text pattern.
4 editable slots
| heading | text | Heading — H3-style section heading (optional on body-only instances) |
| body | richtext | Body Copy — Main long-form prose content; empty in the thin canonical instance |
| buttonLabel | text | Button Label — optional CTA, e.g. Talk to an Expert |
| buttonUrl | url | Button URL — optional; paired with buttonLabel |
Feature Grid with Icons icon-grid
webflow.js anim
Eyebrow + two-tone heading + intro line above a responsive 3-up grid of feature cards, each with an uploaded icon, a title, and a short body paragraph. Adapted 1:1 from the site's Core Capabilities section.
used on 0 pages
from index
Preview: Cards reveal on scroll (slide-to-top). Icons are uploaded images sized to a 3rem footprint; an empty icon simply renders no image. Grid collapses to fewer columns on tablet/mobile via t2-ml1-mp1.
6 editable slots
| eyebrow | text | Eyebrow label — small all-caps kicker (e.g. "Features") |
| heading | text | Section heading (lead) — plain lead of the heading |
| headingEmphasis | text | Section heading (emphasis) — styled bold+italic pill tail of the heading (optional) |
| subtext | text | Intro line — short line under the heading (optional) |
| accent | select | Icon accent color — Product colour for the icons — blue = Zettabyte (default), green = zCLOUD, yellow = select products. |
| items | list | Feature cards — Repeatable (3–6 reads best). Each card has an icon (uploaded MONOCHROME SVG — the block tints it to the accent colour), a title, and a short body paragraph. |
Social proof
3-Column Stats Grid grid-3col
A three-column grid of highlight cells, each pairing a large stat figure with a short caption and a thin animated divider. Use it to showcase key outcomes or proof metrics (utilization, coverage, savings) in a compact band beneath a section heading.
13 variants
from
products/zdataPreview: Renders as-is; sits on a light grey background (section color-grey) inside a centered container. Dividers animate via CSS, so no JS or CMS data is required.
1 editable slot
Key Stats Grid (4-Up) grid-4col
A four-column row of headline metrics, each pairing a large stat value (like "67,000+") with a short caption and a centered divider, used to convey scale and credibility. Use it to showcase company traction or infrastructure numbers on a marketing or about page.
from
aboutPreview: Sits on a light grey section (section color-grey) with dark text; full-width container. Divider elements carry entrance-animation classes (animated-divider, slide-to-top-0-6s) but render fine statically.
1 editable slot
Partner Logo Marquee marquee
A full-bleed, continuously scrolling strip of partner or customer logos with soft fade overlays on the left and right edges. Use it as a trust or social-proof band to show the brands you work with.
from
indexPreview: Full-bleed; animation is self-contained CSS (no JS/Swiper needed). Duplicate the logo set into the two .marquee-content rows for a seamless loop, and keep the left/right overlay divs for the edge fade.
1 editable slot
Trusted-By Logo Wall logo-wall
Static grid of partner/customer logos (the marquee scroller laid out as a fixed bordered grid), with an optional eyebrow + heading.
from
indexPreview: Logos render at their natural size inside bordered cells. Swap the placeholder partner logos and alt text for the customer's own.
3 editable slots
Customer Testimonials testimonial
Eyebrow + two-tone heading over a responsive 3-up grid of quote cards, each with a quote, avatar, author name and role. Adapted from the homepage testimonial cards.
from
indexPreview: Static 3-up grid of quote cards (the homepage testimonial card anatomy, minus the Swiper). Sample quotes are generic placeholders for marketing to replace.
4 editable slots