Platform Feature Showcase
Comprehensive interactive demonstration of every IBM Carbon Design System v11 React component, shortcode, data visualization, encryption module, and typographic capability.
Welcome to the Hugo-Carbon Feature Showcase. This master specimen page exercises and exhibits every built-in capability, interactive component, shortcode, and data engine packaged within the Hugo-Carbon architecture.
1. Cards, Tiles & Digital Business Cards
IBM Carbon Design System Architecture
Clickable Tile Specimen
Expandable Tile Specimen
Digital Business Cards (RFC 6350 vCard Engine)
The vcard shortcode presents rich contact information as an IBM Carbon business card with instant VCF file downloads, clipboard copying, and offline QR code generation.
Mode A: Parsed from .vcf File
Dr. Elena Rostova
Scan with camera on iOS or Android to import contact directly
Mode B: Direct Parameters & Dynamic VCF Generation
Open Source Maintainer
Theme ArchitectScan with camera on iOS or Android to import contact directly
2. Navigation, Pagination & Breadcrumbs
3. Interactive Form Controls & Input Studio
4. Shimmer Skeletons & Loading States
5. Modals, Popovers & Status Feedback
6. Disclosure, Tabs & Structured Content
7. Data Tables & Tabular Exploration
| Target Module | Primary Architecture | Compiled Pages | Build Time | Status |
|---|---|---|---|---|
| Theme Documentation | Dual Sidebars & Markdown | 45 pages | 185 ms | Operational |
| Component Studio | 75+ Carbon Shortcodes | 110 pages | 215 ms | Operational |
| W3C Data Explorer | Web Worker CSVW Parser | 65 pages | 170 ms | Operational |
| Telemetry Dashboard | KPI Metrics & Matrices | 85 pages | 195 ms | Operational |
| Static Asset Engine | Self-Hosted Fonts & JS | 220 pages | 95 ms | Operational |
8. On-Device AI Chat Companion
Carbon Interactive AI Assistant
On-Device WebLLM • Static Vector RAG
How can I assist your research today?
Select a starter prompt or ask any question:
9. Mathematical Typesetting (IBM Plex Math & KaTeX)
Euler’s identity is given by $e^{i\pi} + 1 = 0$, and Einstein’s mass-energy equivalence is $E = mc^2$.
$$\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}$$$$\nabla \times \mathbf{E} = -\frac{\partial \mathbf{B}}{\partial t}, \quad \nabla \times \mathbf{B} = \mu_0 \mathbf{J} + \mu_0 \epsilon_0 \frac{\partial \mathbf{E}}{\partial t}$$10. Declarative Mermaid Flowcharts
11. Interactive Audio Read-Aloud Player
The platform includes a client-side text-to-speech player utilizing the Web Speech API with speed adjustment and voice selection:
12. Social Media Suite & Interactive Badges
The engine includes responsive vector badges and flexible layouts for all core social networks.
Full Collection Inline Badges
Individual Inline Shortcode Badges
Connect with the design systems team on Linkedin , follow updates on Twitter , or inspect source repositories on GitHub (caldeira-cc/hugo-theme-carbon) .
13. Summary of Specialized Modules
W3C CSVW Tabular Data Explorer Client-Side Encrypted Secrets Demo Geospatial Vector Map Explorer Modular Dashboard Engine Style Guide Studio
14. Universal IBM Carbon Icon Suite (2,762 Official Glyphs)
The theme bundles the entire official IBM Carbon Icon Library (@carbon/icons v11.87.0) with 2,762 unique vector icons (5,600 files across sizes 16/, 20/, 24/, 32/, and root) hosted 100% locally with zero external network CDN requests.
Icons can be rendered anywhere via the shortcode, injected as parameters into standard components (button, card, tag, clickable-tile, link, notification), or called programmatically in templates via partial "components/icon.html".