Component Library

Reusable components from the Marbl design system. Each component is self-contained with HTML, CSS, and JS - ready to drop into any Marbl platform.

Foundation

Brand Kit

Interactive brand showcase: colours, typography, spacing, radius, shade picker. The locked-in visual reference.

Live preview + shade-picker

Foundation

Marbl Fonts

Self-hosted variable woff2 stack: Inter (body), Urbanist (display), Petrona (accent + italic). Latin subset, ~167 KB total. Single source of truth across every Marbl-owned site.

Live marbl-fonts.md + .css + assets

Foundation

UI Items

Complete interactive element library: buttons, icon buttons, carousels, forms, dropdowns, accordions, tabs, progress, alerts, tooltips, skeletons, avatars, breadcrumbs, pagination, badges.

Live preview.html

Layout

Site Header

Minimal header: logo left, burger right. Static-positioned by default. --sticky modifier opt-in. No padding traps.

Live site-header.md + .html + .css

Navigation

Burger Menu

Fullscreen overlay: 40/30/30 grid, GSAP clip-path reveal, live London clock, grouped Agency / Social / Legal panel.

Live menu.md + .html + .css + .js

Layout

Site Footer

Avatar + legal links left, social + impressum tooltip right. Avatar links to /about. Static-positioned by default.

Live site-footer.md + .html + .css

Media

Waveform Player

Inline audio with line-style waveform. Wraps vendored ArrayPress WaveformPlayer v1.5.2 with Marbl brand styling. Used for Nura narrations.

Live waveform-player.md + .css + .js

Compliance

Cookie Consent

GDPR cookie banner, bottom-right rectangle. Conversational copy. Auto-injected via marbl-core.js. Canonical subscribe.marbl.codes aesthetic.

Live cookie-consent.md + .css

Layout

Three-column docs layout: tree-nav left, article centre at readable line length, on-this-page TOC right. For knowledge hubs, study microsites, repo doc pages. Inspired by docs.obsidian.md, in Marbl tokens.

Live knowledge-hub.md + .css

Data

Repo Widget

A small card showing meaningful state for a Marbl GitHub repo: stars, forks, version, last-updated, repo + discussions links. Two variants - filled for body, transparent for sidebar. Buttons use canonical .btn / .btn--mini. Schema.org SoftwareSourceCode microdata baked in.

Live repo-widget.md + .html + .css