68 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.
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 grid with post cards, sidebar, breadcrumb, and filter support.
BlogPost
Blog post detail reader. Hero uses Section with site.layoutConfig.blog.hero — image (when present) is injected as a surface layer, otherwise that layer is dropped.
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.
CartModal
CartModal 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.
DesignPillsSlider
Horizontal scrolling pill/tag slider for showcasing design capabilities, tech stack items, or feature highlights. Auto-scrolls with pause on hover.
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.
Filmstrip
Horizontal drag-to-scroll filmstrip with image cards, text overlay, and prev/next navigation via Alpine.js.
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
Link
Inline text link with tone, variant (solid/subtle/none), weight, icon support, and dispatch prop for emitting custom window events.
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
SchemaJsonLd
Emits a Schema.org JSON-LD <script> for the surrounding section.
Showcase
Horizontal drag-to-scroll showcase with large image cards, overlay text, CTA, and optional color swatches. Reuses 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.