Carbon Design System v11 Component Suite

The Hugo-Carbon Modular Platform implements the IBM Carbon Design System v11 component specifications using pure semantic HTML5, token-driven SCSS, and lightweight vanilla JS modules compiled via Hugo’s native asset pipeline (js.Build).

All components adhere strictly to:

• 16-Column 2x Grid Layout (8px mini-units, 4px baseline rhythm, 1440px max width boundary)
• Token-based Theming (--cds-* across White, Gray 10, Gray 90, Gray 100, and custom tripartite themes)
• WCAG 2.1 / 2.2 AA Accessibility (full keyboard tab-stops, 2px focus rings, ARIA landmarks)
• Zero Runtime CDNs (100% self-hosted dependencies)

1. Skeletons & Shimmer Loading States

Skeletons provide smooth visual placeholders during asynchronous data fetching.

Shortcode Examples

1
2
3
4
5
6
7

{{< skeleton type="text" width="80%" >}}
{{< skeleton type="heading" width="65%" >}}
{{< skeleton type="paragraph" count="3" >}}
{{< skeleton type="button" width="140px" >}}
{{< skeleton type="card" >}}
{{< skeleton type="table" >}}
{{< skeleton type="icon" >}}

Skeleton Component Preview

2. Accordions

Accordions disclose content sections on demand with smooth rotational chevrons and keyboard navigation.

• What is the Local-First Zero-CDN Architecture?
  All scripts, stylesheets, mathematical rendering engines (KaTeX), MapLibre vector tiles, and IBM Plex fonts are 100% self-hosted locally under static/.
• How does Multi-Subdomain Monorepo compilation work?
  Hugo isolates builds into 5 distinct Cloudflare Pages targets (cesar.caldeira.cc, blog.caldeira.cc, apps.caldeira.cc, carbon.caldeira.cc, and assets.caldeira.cc).

1
2
3
4
5

{{< accordion align="start" >}}
  {{< accordion-item title="Section Title" open="true" >}}
    Content goes here...
  {{< /accordion-item >}}
{{< /accordion >}}

3. Tabs & Contained Tab Panels

Tabs organize dense content into switchable panels without leaving the current view.

The architecture relies on static compilation with zero runtime React or Node server dependencies.

All colors are mapped to CSS custom properties (`--cds-*`) with build-time theme injection.

Static AES-256-GCM encryption protects sensitive content without plaintext leakage.

1
2
3
4
5

{{< tabs type="contained" tabs="Tab 1,Tab 2,Tab 3" >}}
  {{< tab-panel active="true" >}}Content for Tab 1{{< /tab-panel >}}
  {{< tab-panel >}}Content for Tab 2{{< /tab-panel >}}
  {{< tab-panel >}}Content for Tab 3{{< /tab-panel >}}
{{< /tabs >}}

4. Progress Bars & Step Indicators

Meters and step trackers for linear workflows and multi-step processes.

• Define Tokens
  Step 1
• Implement Components
  Step 2
• Run Link Audit
  Step 3
• Deploy Targets
  Step 4

1
2

{{< progress-bar value="85" label="Audit" helper="85% Complete" status="success" >}}
{{< progress-indicator steps="Step 1,Step 2,Step 3" current="2" vertical="false" >}}

5. Contained Lists & Structured Lists

Organize key-value specifications and grouped items within clean Carbon containers.

6. Action Buttons & Button Sets

Carbon buttons provide clear calls to action with standardized visual weights.

Primary Action Secondary Action Tertiary Action Carbon Storybook ↗ Danger Action

1
2
3

{{< button kind="primary" icon="arrow-right" >}}Primary Action{{< /button >}}
{{< button kind="secondary" >}}Secondary Action{{< /button >}}
{{< button kind="ghost" href="https://..." icon="launch" >}}External Link{{< /button >}}

7. Notifications & Alerts

Inline alerts and toast notifications for non-disruptive system feedback.

8. Form Controls, Content Switchers, Toggles & Tooltips

9. Cards & Carbon Tiles

Clickable tile with hover elevation and focus state rings.

Above-the-fold summary content.

Below-the-fold expanded details revealed smoothly on chevron click.

10. Carbon Pagination & Navigation

11. AI Chat & Generative AI Component Suite

Compliant with IBM Carbon for AI React component specifications (.cds--chat, .cds--chat-header, .cds--chat-messages, .cds--chat-composer).

1

{{< ai-chat title="Research Assistant" model="SmolLM2-360M-Instruct" height="550px" >}}

12. Master Carbon React Component Shortcode Inventory