76 Blocks · 5 Kategorien
Block Library
Alle Blocks auf einen Blick — mit Props-Dokumentation, Live-Preview und kopierbarem Code in Block-JSON und Astro-Syntax.
Controls
Buttons, Badges, Alerts, Cards und andere interaktive UI-Elemente.
Accordion
Expandable panel group with single or multiple open mode. Each item has a title and a `blocks` array rendered via RenderBlocks (use the `html` block inside `blocks` for raw HTML).
Badge
Small inline label for status indicators, tags, counters, and categories. Supports tone coloring and style variants (solid, outline, soft).
Button
Interactive button with tone coloring, style variants, sizes, icon support, and window event dispatch. Renders as <a> when href is set, otherwise <button>.
Card
Versatile content container with tone, variant (outline/soft/ghost), optional hover effect, and optional href to render as a clickable link card.
Collapse
Lightweight expandable panel using native <details>. Use name prop for accordion behavior (only one open at a time via JS).
IconBadge
Circular icon container with tone-based background coloring. Use for feature icons, step indicators, or decorative icon displays.
Layout
Grid, Split, Stack, Row – Strukturbausteine für Seitenlayouts.
Columns
Generic N-column grid (default 12) with explicit per-item column placement (start + span, responsive). The editorial primitive behind offset text columns and asymmetric image/text rows — each item carries its own start/span, so a text block can sit inset while an image stays at the container edge, without negative margins.
Container
Max-width content wrapper that constrains child content to a centered container. Supports layout variants (narrow/default/wide/full/bleed) for controlling max-width.
Divider
Visual separator line between content sections. Renders as a horizontal rule.
Grid
CSS grid layout container with configurable column count and gap. Collapses to fewer columns on smaller viewports.
Row
Horizontal flexbox container for inline arrangement of child blocks. Supports gap, alignment, wrapping, and responsive stacking.
Section
Top-level page section wrapper with padding, background surface (color, gradient, pattern, image), theme (light/dark), and inner Container. The primary structural block for page layout.
Spacer
Empty vertical space block for adding breathing room between content. Configurable height via size prop.
Split
Two-column layout with configurable lead/body ratio. Use for side-by-side content like text + image or form + description.
Stack
Vertical flexbox container that stacks child blocks with consistent gap spacing.
Timeline
Vertical timeline with alternating or single-sided item placement. Supports icons, dates, connecting lines, and rich content per entry.
Content & Typography
Typografie, Listen, Medien und Rich-Text-Blöcke.
BlogIndex
Blog index — featured first post, topic chips for category filtering, magazine-style 3-column grid for the rest. No sidebar.
BlogPost
Blog post detail reader. Prominent author pill in the hero, tag pills + author bio + related posts + CTA block in the footer, and a floating action bar with ToC/share/scroll-top.
BlogPostCard
Blog post card with image, category, title, excerpt, and meta. Supports View Transition morph on the featured image.
Heading
Section heading with optional eyebrow text, title, subtitle, and alignment. Use as the primary heading block inside Section blocks.
Html
Raw HTML block.
List
Ordered or unordered list with variant styles (bullets, checks, numbered, none). Supports tone coloring and icons per item.
Media
Responsive image or video element with aspect ratio control, lazy loading, rounded corners, and optional caption.
RichText
Renders rich text with prose typography. Accepts pre-rendered HTML (html prop) or Markdown (content prop).
Text
General-purpose typography block for body text, titles, and labels. Supports variant (title/body/eyebrow), tone coloring, size, and semantic HTML tag selection.
Composites & Sections
Zusammengesetzte Sektionen wie FAQ, Testimonials, Pricing-Tabellen und Modals.
AddonCard
Card teaser for a single purchasable addon (image, title, subtitle, price). Clicking the card opens an addon detail drawer (Alpine `addonDetail`) with the full description and bullets. Mirrors the AddonCard layout from the webeo onboarding configurator. Designed to live inside an addon grid on the pricing page.
Alert
Notification box for user feedback, warnings, errors, and success messages. Supports tone-based coloring with optional title and icon.
BlockDemo
Internal component library wrapper that renders a live preview alongside Block JSON and Astro code tabs with copy-to-clipboard. Used exclusively on the /components demo pages.
BlogTeaser
Landing-page blog teaser: pulls the latest N posts from the baked blog data (live client fallback in dev) and renders them as overlay Cards in a fixed responsive grid, with a 'view all' Card as the last cell. Self-sourcing — no items passed in. Composes Section + Heading + Card.
BlogTopicChips
BlogTopicChips Block
CartModal
CartModal Block
ChatMockup
ChatMockup Block
CodeBlock
Formatted code display with syntax language class and copy-to-clipboard button. Used for showing code snippets in documentation or demo contexts.
ComparisonTable
Feature comparison table with plan columns and feature rows. Supports sticky headers, expandable sections, and dynamic cell types.
ContactForm
Pre-built contact form with name, email, phone, company, and message fields. Wraps the generic Form block with opinionated field configuration.
CtaStrip
Full-width call-to-action strip with headline, optional subtitle, and up to two CTA buttons.
DashboardMockup
DashboardMockup Block
DesignPillsSlider
Apple-style feature slider. Desktop: a fixed-height column of grey pills on the left (a '+' icon + title when collapsed) that expand into a card revealing a body sub-text when active, synced with a crossfading image on the right; chevron up/down + arrow keys + click switch the active item. Mobile: the image sits on top and the cards become a horizontal snap-scroll carousel (swipe or tap), kept in sync with the image. Pass `image` as a public path string or a bundled ImageMetadata (illustrationSrc(id)) — it is normalised internally.
DeviceShowcase
Responsive demo preview using devices.css. DESKTOP: a realistic MacBook frame plays the desktop reel/video (or static screenshot) with an iPhone frame overlapping front bottom-left showing a STATIC mobile screenshot. MOBILE: the MacBook is hidden and the iPhone alone plays the portrait MOBILE reel/video. Motion only ever comes from a video — no fake JS scroll.
Dropdown
Alpine.js-powered dropdown menu with items supporting labels, icons, hrefs, keyboard shortcuts, dividers, and disabled states.
Faq
SEO-optimized FAQ section with structured data (JSON-LD schema). Renders question/answer pairs as expandable accordion items.
FlipCard
3D flip card with front and back faces. Front shows optional icon, value, and title. Back reveals title and description on hover. Use for stats, features, or any content that benefits from a reveal interaction.
Form
Generic form builder that renders a dynamic field array with validation, labels, placeholders, and submit handling. Supports text, email, textarea, select, and checkbox field types.
Gallery
Image gallery with grid or masonry layout, lightbox support, and optional captions. Handles responsive image sizing and lazy loading.
GastroGallery
GastroGallery Block
HeroSlideshow
HeroSlideshow Block
IconSlot
IconSlot Block
ImageConfigurator
Config-driven product visualizer: scene tabs × color-variant swatches with image crossfade, optional before/after slider, query-param deep-linking, CTA handover and Plausible events.
Link
Inline text link with tone, variant (solid/subtle/none), weight, icon support, and dispatch prop for emitting custom window events.
MachineSplit
Human/machine split: a screenshot of the human-facing site with a dark, machine-readable layer on top, revealed by a draggable seam (pointer + keyboard). Signals (JSON-LD card, chips) light up as the seam uncovers them. Intro animation sweeps twice, then parks; any interaction stops it for good. The start state is server-rendered, so the split is readable before hydration and without JS. prefers-reduced-motion renders the parked state directly.
MenuCategory
MenuCategory Block
MenuDetail
MenuDetail Block
MenuOverview
MenuOverview Block
Modal
Dialog overlay with optional trigger button, scrollable body via RenderBlocks, and configurable footer. Supports persistent mode to prevent backdrop/escape close.
PinnedTimeline
Scroll-driven timeline with pinned/sticky items that animate as the user scrolls. Ideal for process flows, project phases, or historical timelines with visual progression.
PricingCards
Pricing cards grid with price, badge, feature checklist and CTA per item. Use for plan/package comparison sections. Does not wrap in Section: nest inside a Section block or use standalone.
Process
Multi-step process visualization with numbered cards, icons, and descriptions. Use for onboarding flows or how-it-works sections.
ProcessStepCard
Individual step card within a Process block. Renders step number, icon, title, and description with connecting visual elements.
PropsTable
Internal documentation table that renders component prop definitions from manifest data. Shows name, type, default value, and description. Used exclusively on /components detail pages.
ReservationForm
ReservationForm Block
RoiCalculator
Interactive CHF ROI calculator for AI visibility. Sliders for demand, conversion and customer value live-compute the additional revenue potential as AI-driven search grows (today → 2028 → 2030), visualised as a year-by-year bar/line chart. Standalone (no header) — pair with a heading block above. CSP-safe Alpine (roiCalculator).
SchemaJsonLd
Emits a Schema.org JSON-LD <script> for the surrounding section.
ServicesIndex
Editorial services index: a large typographic list of offerings where hovering a row reveals its photo in a sticky stage (desktop) and stacks the photo inline (mobile). Pure-CSS reveal, no JS. This block is ONLY the interactive index — pair it with a `heading` block for the intro and a `link`/`button` block for any CTA. Use when a services section must not read as a card grid.
Showcase
Horizontal drag-to-scroll card carousel: large image cards with title + optional body, eyebrow, CTA and colour swatches below the image. Each card's visual is an image; if a card has no image but an `icon`, a large centred icon is shown instead (icon-led cards before real imagery exists). Theme-adaptive (works on light and dark surfaces). Optional autoplay with a per-slide duration, a progress-dot strip and a play/pause button; otherwise prev/next chevrons. Reuses the filmstrip Alpine component for scroll/drag/nav.
Slider
Image slider/carousel with autoplay, navigation dots, and configurable slide interval.
Stats
Numeric statistics display with large numbers, labels, and optional icons. Use for KPIs, counters, or social proof metrics.
SurfaceLayers
SurfaceLayers Block
Tabs
Alpine.js tab navigation with RenderBlocks content per tab. Supports URL hash sync, daisyUI variants, badges, icons, and keyboard navigation.
TestimonialCard
Individual testimonial/review card with quote text, author name, role, company, and avatar. Use inside Testimonials section or standalone for social proof.
Testimonials
Testimonial section displaying multiple customer reviews. Wraps TestimonialCard instances with optional heading and layout.
TrustBar
Logo bar displaying client or partner brand logos in a horizontal row or auto-scrolling marquee.