Foundation
01A concise starting configuration.
- Core layout
- Theme tokens
- Responsive states
Component registry
Every component, rendered live.
Each block below is a real, working component from the Derby system — not a mockup. Inspect the data-hook contract under each one to see how it is wired.
Header
data-page → buildHeader()The sticky shared header uses a compact brand mark, active navigation state, optional registry action, and an accessible off-canvas mobile menu.
The real header is at the top of this page. At ≤900px it becomes an off-canvas panel with a backdrop, close state, link-close behavior, and Escape-key support.
Page hero
data-copy + breadcrumbA subpage banner with eyebrow, title, lede, and breadcrumb. The hero above is a live example.
Reference section
A neutral page-level heading
A subpage hero with breadcrumb, eyebrow, and lede that works across any information architecture.
Markup:
<section class="page-hero"> with a .breadcrumb, .eyebrow, h1, and .lede.Cards (generic grid)
data-cards="key"The generic card grid — one renderer, many card classes. Used for features, resources, profiles, links, summaries, and more.
Structured content
Combine a visual cue, heading, description, and optional action.
Flexible placement
Use the same card pattern in features, resources, profiles, or links.
Consistent behavior
Spacing, focus, contrast, and responsive rules remain predictable.
Markup:
<div class="card-grid" data-cards="demoCards"></div>. The renderer reads an array from the content object and builds each card.Stats band
data-stats="key"A dark highlight band for concise numeric values. Count-up is an optional behavior of this component rather than a duplicate component.
12Modules
48Variants
4Breakpoints
100Reusable
Markup:
<div class="stats-grid" data-stats="demoStats"></div>. Each item is <strong>value</strong><span>label</span>.Process (numbered steps)
data-process="key"Numbered steps for a process, timeline, or how-it-works.
Define
Clarify the information, audience, and desired outcome.
Compose
Select and order the components that support the content.
Adapt
Apply theme tokens, responsive rules, and interaction states.
Verify
Test semantics, keyboard behavior, layout, and visual output.
Markup:
<div class="process-list" data-process="demoProcess"></div>. Numbers auto-increment via CSS counter-reset.Quotes and ratings
data-reviews="key"Attributed statements with optional ratings or metadata.
★★★★★
A concise statement can reinforce a key idea without tying the layout to one industry.
★★★★☆
The same structure supports ratings, quotations, or short editorial highlights.
★★★★★
Attribution and optional metadata stay consistent across every visual theme.
Markup:
<div class="reviews-grid" data-reviews="demoReviews"></div>.Content accordion
data-faq="key"Expandable content groups with aria-expanded and smooth height animation.
Markup:
<div class="faq-list" data-faq="demoFaq"></div>. Each item toggles aria-expanded and animates max-height.Tabs
data-tabs="key"Tabbed content for related views, specifications, categories, or supporting details.
Summarize the primary idea without changing pages or opening another interface.
Reveal supporting information while preserving the surrounding context.
Present structured facts, requirements, or metadata in a compact panel.
Markup:
<div class="tabs" data-tabs="demoTabs"></div>. Uses role="tablist", aria-selected, and hidden panels.Carousel
data-carousel="key"Controlled slider with previous/next, 44px pagination targets, and a visible pause/play control. Inactive slides leave the accessibility tree.
Markup:
<div class="carousel" data-carousel="demoCarousel"></div>. Rotation pauses on demand or keyboard focus and is disabled by prefers-reduced-motion.Marquee / ticker
.marquee-trackA scrolling strip for labels, categories, partner names, status terms, or repeated phrases.
TrustedLocalResponsiveAccessibleFastReusable
TrustedLocalResponsiveAccessibleFastReusable
Markup:
<div class="marquee"><div class="marquee-track">…</div></div>. Duplicate the content once for a seamless loop.Bento grid
data-bento="key"Mixed-size card layout — one big, several small. Breaks the uniform-grid monotony.
Hero feature
The big one.
Card A
Small.
Card B
Small.
Card C
Tall.
Card D
Small.
Markup:
<div class="bento" data-bento="demoBento"></div>. Items can be wide, tall, or dark.Timeline
data-timeline="key"A vertical timeline for history, milestones, or a longer process.
Phase 01
Baseline
Establish the initial structure, tokens, and content contract.
Phase 02
Expansion
Add variants only when they provide a distinct layout or behavior.
Phase 03
Validation
Exercise responsive, keyboard, and reduced-motion states.
Phase 04
Release
Publish a versioned and documented reference implementation.
Markup:
<div class="timeline" data-timeline="demoTimeline"></div>.Before / after
.ba + .ba-handleDraggable image comparison for any visual state change, revision, transformation, or side-by-side inspection.
Markup:
<div class="ba"><img><div class="ba-after"><img></div><div class="ba-handle"></div></div>. Drag the handle to compare.Scroll reveal
data-revealFade-in on scroll. Add data-reveal to any element. Disabled under reduced-motion.
Reveal 1
This card fades in when scrolled into view.
Reveal 2
Add data-reveal to opt in.
Reveal 3
Works on any element, any section.
Markup:
<div data-reveal>…</div>. Uses IntersectionObserver; fully disabled under prefers-reduced-motion.Progress bars
data-progress="key"Labeled meters for completion, allocation, readiness, or comparative values. Based on Elementor's Progress Bar category, with semantic progressbar roles.
Use measurable values only. Each track exposes
aria-valuemin, aria-valuemax, and aria-valuenow.Pricing / comparison table
data-pricing="key"Comparable tiers with one optional featured state. Numeric labels are intentionally generic so the component can represent plans, packages, levels, or editions.
Expanded
02A broader component composition.
- Everything in Foundation
- Interactive patterns
- Additional page templates
Custom
03A tailored system extension.
- Purpose-built modules
- Integration contract
- Validation notes
Inspired by Elementor's Price Table widget; Derby keeps the content contract generic and avoids assuming currency or a sales context.
Flip cards
data-flip="key"Two-state cards reveal supporting detail on hover, focus, or tap. Click a card to hold its revealed state.
Inspired by Elementor's Flip Box widget. Derby adds equivalent keyboard/touch behavior and removes the rotation under reduced motion.
Notice banner
.notice + data-dismissNeutral status heading
This dismissible message can communicate information, success, caution, or a temporary update.
Inspired by Elementor's Alert widget. Use
role="status" for polite information; reserve role="alert" for urgent messages.Countdown
data-countdownA neutral time-to-milestone display. This demo starts from a fixed duration instead of implying a promotion or event.
01Days
02Hours
03Minutes
04Seconds
Inspired by Elementor's Countdown widget. Production use should accept an ISO date and define an explicit expired state.
Table of contents
data-tocOverview
Generate a compact list of links from the headings in long-form content.
Behavior
The current section receives aria-current as the reader moves through the page.
Guidance
Use it when the content is long enough that direct section navigation saves effort.
Inspired by Elementor's Table of Contents widget. Derby's version is dependency-free and uses real anchor links.
Code block
data-copy-code<div class="card-grid" data-cards="items"></div>Inspired by Elementor's Code Highlight widget. Includes horizontal scrolling and a copy action.
Call-to-action band
.cta-bandA clear next step, expressed generically.
Pair one focused message with one primary action and keep the surrounding context intact.
Inspired by Elementor's Call to Action widget. The Derby version is a semantic content band rather than a hover-dependent image tile.