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

Icon Library

1,780 searchable icons across 45 categories, Line + Solid. Normalised to currentColor so they take any text colour. Search, filter by category/style, click to copy.

Live searchable

Chrome

The new square-kit header: animated logo left, self-revealing pill nav right. Static by default. The canonical header shell - pairs the logo with the Pill Nav component (the old burger + menu overlay are retired).

Live logo + pill nav

Navigation

Pill Nav

Self-revealing pill-burger nav (the header's right slot). Resting = [burger][CTA]; hover/focus reveals the links and the burger collapses. Mobile = click, burger morphs to X. Square kit.

Live desktop + mobile

Chrome

Footer Reveal

The new Marbl footer with the scroll reveal. Square kit. Captured from the events build; replaces the old Site Footer for new builds.

Live new

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

Holding Page

Full-viewport interstitial for a decommissioned or paused site: animated logo, return button, centred message, canonical footer. noindex + canonical-home. Assembled from the library, not rebuilt.

Live holding-page.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

Communication

Emails

The Marbl email family for Resend. One shared shell (lib.mjs), bodies in templates.mjs, synced to Resend via sync-resend.mjs. Combined dark/light banded design: waitlist, welcome, enquiry-received, admin-notify, announcement, ticket-confirmation.

Live Resend · 6 templates

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