Component Showcase
Live gallery of the reusable Bootstrap 5 component patterns rendered by the component-showcase include.
Updated Jun 26, 2026Administration
Live render of _includes/components/component-showcase.html — the
reusable Bootstrap 5.3 pattern gallery. The breadcrumb and list-group entries
here are demo links only: they are intentionally inert
(href="#") so this include never injects site-absolute paths that
would 404 on remote-theme consumers (issue #219).
Alerts
Contextual feedback messages for user actions and system status:
docker-compose up for live reload during development.journals layout will be renamed to article in v1.0._config.yml — run the install script to generate one.Buttons
A complete button system with contextual colors, outlines, and sizes:
Badges
Contextual labels, status indicators, and notification counters:
Cards
Responsive card layouts — the building block of post listings, feature displays, and documentation:
15+ Layouts
From landing pages to blog articles, notebooks to statistics dashboards — a layout for every content type.
54+ Includes
Modular, reusable components — navbars, sidebars, analytics, search, cookie consent, and more.
19 JS Modules
ES6 navigation, code-copy, search modal, color modes, scroll spy, and gesture support.
Blog Post Card
Full-featured post cards with preview images, category badges, reading time, author attribution, and tag display.
Documentation Card
Clean documentation layout with left sidebar navigation, table of contents, breadcrumbs, and responsive typography.
Accordion
Collapsible content sections — ideal for FAQs and detailed documentation:
docker-compose.yml for local development. Run docker-compose up and your site is live at localhost:4000 with auto-reload. Supports Apple Silicon, Intel, and Linux with zero local Ruby dependencies.
data-bs-theme attribute with smooth CSS transitions.
Tabs
Tabbed content panels for organizing related information:
Add to your _config.yml for GitHub Pages:
remote_theme: "bamr87/zer0-mistakes"
plugins:
- jekyll-remote-themeRun locally with Docker — no Ruby needed:
git clone https://github.com/bamr87/zer0-mistakes.git
cd zer0-mistakes
docker-compose up
# Open http://localhost:4000Install as a Ruby gem for classic Jekyll projects:
# Gemfile
gem "jekyll-theme-zer0", "~> 0.22"
# _config.yml
theme: jekyll-theme-zer0Progress Bars
Visual indicators for build status, completion tracking, and loading states:
Breadcrumbs
Hierarchical navigation trail showing current page position:
Responsive Table
Styled tables with Bootstrap — all Markdown tables automatically receive Bootstrap styling:
| Component | Location | Type | Status |
|---|---|---|---|
| Offcanvas Navbar | _includes/navigation/navbar.html |
Navigation | Active |
| Cookie Consent | _includes/components/cookie-consent.html |
Privacy | Active |
| Mermaid Diagrams | _includes/components/mermaid.html |
Content | Active |
| Search Modal | _includes/components/search-modal.html |
UI | Active |
| PostHog Analytics | _includes/analytics/posthog.html |
Analytics | Active |
Tooltips
Interactive hints and contextual information on hover:
List Group
Organized content lists with icons, badges, and action states: