OpenVoxProject · avitacco · Aug 22, 2026 · Aug 22, 2026
diff --git a/README.md b/README.md
@@ -15,7 +15,7 @@ The component catalog, by category:
 | Images | `vox-avatar`, `vox-billboard`, `vox-icon` — 79 icons ([full set](https://openvoxproject.github.io/voxblocks/icons/)): shared UI baseline, OpenVox marketing, module registry (Forge replacement), fleet console (Puppet Enterprise replacement). `<vox-alert>`/`<vox-callout>` show one automatically; `<vox-sidenav-item>`/`<vox-card>`/`<vox-empty-state>`/`<vox-link-hub-item>` accept one via an `icon` slot |
 | Navigation | `vox-breadcrumbs`, `vox-header` (collapses to a menu button below 768px), `vox-pagination`, `vox-series-nav`, `vox-sidenav` (collapses to a menu button below 768px, same as `vox-header`), `vox-subnav`, `vox-tabs`, `vox-toc` |
 | Overlays | `vox-dialog`, `vox-disclosure`, `vox-dropdown` |
-| Page content | `vox-accordion`, `vox-alert`, `vox-badge`, `vox-calendar-tile`, `vox-callout`, `vox-card`, `vox-cta-band`, `vox-empty-state`, `vox-footer`, `vox-grid`, `vox-hero`, `vox-link-hub`, `vox-loader`, `vox-quote`, `vox-sponsor-tier`/`vox-sponsor`, `vox-stat`, `vox-step-indicator`, `vox-timeline` |
+| Page content | `vox-accordion`, `vox-alert`, `vox-badge`, `vox-calendar-tile`, `vox-callout`, `vox-card`, `vox-code-block` (built-in syntax highlighting, no Prism/highlight.js/Shiki needed), `vox-cta-band`, `vox-empty-state`, `vox-footer`, `vox-grid`, `vox-hero`, `vox-link-hub`, `vox-loader`, `vox-quote`, `vox-sponsor-tier`/`vox-sponsor`, `vox-stat`, `vox-step-indicator`, `vox-timeline` |
 | Utilities | Utility classes: spacing (`vox-m-*`/`vox-p-*`), a `vox-container` layout wrapper (1280px, centered, matches `vox-header`/`vox-footer`), typography (`vox-ts-*`, `vox-text-*`), color (`vox-color-*`, `vox-bg-*`, plus an extended `vox-color-{hue}-{100-900}`/`vox-bg-{hue}-{100-900}` palette across 7 hues), border, display, flex, gap, shadow, visibility (incl. `vox-sr-only` and responsive hiding), width, z-index — plus `.vox-table`/`.vox-table-wrap`, `.vox-list`, and `.vox-prose` |
 
 Form controls are form-associated custom elements (ElementInternals): they submit values, files, and validity with a plain `<form>` like native inputs.

diff --git a/docs/_data/sidebar.yml b/docs/_data/sidebar.yml
@@ -67,6 +67,7 @@ components:
       - { text: Calendar Tile, link: /components/calendar-tile/ }
       - { text: Callout, link: /components/callout/ }
       - { text: Card, link: /components/card/ }
+      - { text: Code Block, link: /components/code-block/ }
       - { text: CTA Band, link: /components/cta-band/ }
       - { text: Empty State, link: /components/empty-state/ }
       - { text: Footer, link: /components/footer/ }

diff --git a/docs/components/accordion/index.md b/docs/components/accordion/index.md
@@ -20,13 +20,13 @@ title: "Accordion"
   </vox-accordion>
 </div>
 
-```html
-<vox-accordion single>
-  <vox-accordion-item heading="Is OpenVox compatible with Puppet?" open>
-    <p>Yes — it's a drop-in replacement.</p>
-  </vox-accordion-item>
-</vox-accordion>
-```
+<vox-code-block language="html">
+&lt;vox-accordion single&gt;
+  &lt;vox-accordion-item heading="Is OpenVox compatible with Puppet?" open&gt;
+    &lt;p&gt;Yes — it's a drop-in replacement.&lt;/p&gt;
+  &lt;/vox-accordion-item&gt;
+&lt;/vox-accordion&gt;
+</vox-code-block>
 
 ## API
 

diff --git a/docs/components/alert/index.md b/docs/components/alert/index.md
@@ -13,11 +13,11 @@ title: "Alert"
   <vox-alert variant="danger" heading="Build failed" dismissible><p>Check the CI logs for details. This one is dismissible.</p></vox-alert>
 </div>
 
-```html
-<vox-alert variant="warning" heading="Maintenance window" dismissible>
-  <p>The Forge API will be read-only on Saturday.</p>
-</vox-alert>
-```
+<vox-code-block language="html">
+&lt;vox-alert variant="warning" heading="Maintenance window" dismissible&gt;
+  &lt;p&gt;The Forge API will be read-only on Saturday.&lt;/p&gt;
+&lt;/vox-alert&gt;
+</vox-code-block>
 
 ## API
 

diff --git a/docs/components/avatar/index.md b/docs/components/avatar/index.md
@@ -13,10 +13,10 @@ title: "Avatar"
   <vox-avatar size="xl" src="https://avatars.githubusercontent.com/u/188505547?s=160" alt="OpenVox logo"></vox-avatar>
 </div>
 
-```html
-<vox-avatar src="/img/user.png" alt="K. Mensah" size="lg"></vox-avatar>
-<vox-avatar initials="KM" alt="K. Mensah"></vox-avatar>
-```
+<vox-code-block language="html">
+&lt;vox-avatar src="/img/user.png" alt="K. Mensah" size="lg"&gt;&lt;/vox-avatar&gt;
+&lt;vox-avatar initials="KM" alt="K. Mensah"&gt;&lt;/vox-avatar&gt;
+</vox-code-block>
 
 ## API
 

diff --git a/docs/components/badge/index.md b/docs/components/badge/index.md
@@ -16,13 +16,13 @@ title: "Badge"
   <vox-badge variant="neutral">Draft</vox-badge>
 </div>
 
-```html
-<vox-badge variant="brand">v8.1.0</vox-badge>
-<vox-badge variant="tip">Stable</vox-badge>
-<vox-badge variant="warning">Deprecated</vox-badge>
-<vox-badge variant="danger">Breaking</vox-badge>
-<vox-badge variant="neutral">Draft</vox-badge>
-```
+<vox-code-block language="html">
+&lt;vox-badge variant="brand"&gt;v8.1.0&lt;/vox-badge&gt;
+&lt;vox-badge variant="tip"&gt;Stable&lt;/vox-badge&gt;
+&lt;vox-badge variant="warning"&gt;Deprecated&lt;/vox-badge&gt;
+&lt;vox-badge variant="danger"&gt;Breaking&lt;/vox-badge&gt;
+&lt;vox-badge variant="neutral"&gt;Draft&lt;/vox-badge&gt;
+</vox-code-block>
 
 ## API
 

diff --git a/docs/components/billboard/index.md b/docs/components/billboard/index.md
@@ -15,13 +15,13 @@ title: "Billboard"
   </vox-billboard>
 </div>
 
-```html
-<vox-billboard heading="Community-maintained modules" reverse>
-  <img slot="media" src="/img/community.png" alt="" />
-  <p>Hundreds of modules, tools, and gems…</p>
-  <vox-button slot="actions">Browse modules</vox-button>
-</vox-billboard>
-```
+<vox-code-block language="html">
+&lt;vox-billboard heading="Community-maintained modules" reverse&gt;
+  &lt;img slot="media" src="/img/community.png" alt="" /&gt;
+  &lt;p&gt;Hundreds of modules, tools, and gems…&lt;/p&gt;
+  &lt;vox-button slot="actions"&gt;Browse modules&lt;/vox-button&gt;
+&lt;/vox-billboard&gt;
+</vox-code-block>
 
 ## API
 

diff --git a/docs/components/breadcrumbs/index.md b/docs/components/breadcrumbs/index.md
@@ -14,10 +14,10 @@ title: "Breadcrumbs"
   </vox-breadcrumbs>
 </div>
 
-```html
-<vox-breadcrumbs>
-  <a href="/">Home</a>
-  <a href="/modules">Modules</a>
-  <span aria-current="page">puppet-nginx</span>
-</vox-breadcrumbs>
-```
+<vox-code-block language="html">
+&lt;vox-breadcrumbs&gt;
+  &lt;a href="/"&gt;Home&lt;/a&gt;
+  &lt;a href="/modules"&gt;Modules&lt;/a&gt;
+  &lt;span aria-current="page"&gt;puppet-nginx&lt;/span&gt;
+&lt;/vox-breadcrumbs&gt;
+</vox-code-block>
diff --git a/docs/components/button/index.md b/docs/components/button/index.md
@@ -15,12 +15,12 @@ title: Button
   <vox-button variant="ghost">Ghost</vox-button>
 </div>
 
-```html
-<vox-button variant="brand">Brand</vox-button>
-<vox-button variant="alt">Alt</vox-button>
-<vox-button variant="danger">Danger</vox-button>
-<vox-button variant="ghost">Ghost</vox-button>
-```
+<vox-code-block language="html">
+&lt;vox-button variant="brand"&gt;Brand&lt;/vox-button&gt;
+&lt;vox-button variant="alt"&gt;Alt&lt;/vox-button&gt;
+&lt;vox-button variant="danger"&gt;Danger&lt;/vox-button&gt;
+&lt;vox-button variant="ghost"&gt;Ghost&lt;/vox-button&gt;
+</vox-code-block>
 
 ## Sizes
 
@@ -30,31 +30,31 @@ title: Button
   <vox-button size="lg">Large</vox-button>
 </div>
 
-```html
-<vox-button size="sm">Small</vox-button>
-<vox-button size="md">Medium</vox-button>
-<vox-button size="lg">Large</vox-button>
-```
+<vox-code-block language="html">
+&lt;vox-button size="sm"&gt;Small&lt;/vox-button&gt;
+&lt;vox-button size="md"&gt;Medium&lt;/vox-button&gt;
+&lt;vox-button size="lg"&gt;Large&lt;/vox-button&gt;
+</vox-code-block>
 
 ## As a link
 
 <div style="margin: 1rem 0;">
   <vox-button href="https://voxpupuli.org/openvox/" target="_blank">Visit OpenVox</vox-button>
 </div>
 
-```html
-<vox-button href="https://voxpupuli.org/openvox/" target="_blank">Visit OpenVox</vox-button>
-```
+<vox-code-block language="html">
+&lt;vox-button href="https://voxpupuli.org/openvox/" target="_blank"&gt;Visit OpenVox&lt;/vox-button&gt;
+</vox-code-block>
 
 ## Disabled
 
 <div style="margin: 1rem 0;">
   <vox-button disabled>Disabled</vox-button>
 </div>
 
-```html
-<vox-button disabled>Disabled</vox-button>
-```
+<vox-code-block language="html">
+&lt;vox-button disabled&gt;Disabled&lt;/vox-button&gt;
+</vox-code-block>
 
 ## API
 

diff --git a/docs/components/calendar-tile/index.md b/docs/components/calendar-tile/index.md
@@ -14,9 +14,9 @@ title: "Calendar Tile"
   </div>
 </div>
 
-```html
-<vox-calendar-tile date="2026-09-18"></vox-calendar-tile>
-```
+<vox-code-block language="html">
+&lt;vox-calendar-tile date="2026-09-18"&gt;&lt;/vox-calendar-tile&gt;
+</vox-code-block>
 
 ## API
 

diff --git a/docs/components/callout/index.md b/docs/components/callout/index.md
@@ -15,11 +15,11 @@ title: "Callout"
   <vox-callout variant="danger"><p>A destructive or breaking consequence.</p></vox-callout>
 </div>
 
-```html
-<vox-callout variant="tip">
-  <p>A helpful suggestion.</p>
-</vox-callout>
-```
+<vox-code-block language="html">
+&lt;vox-callout variant="tip"&gt;
+  &lt;p&gt;A helpful suggestion.&lt;/p&gt;
+&lt;/vox-callout&gt;
+</vox-code-block>
 
 ## Custom heading
 
@@ -29,11 +29,11 @@ title: "Callout"
   </vox-callout>
 </div>
 
-```html
-<vox-callout variant="warning" heading="Deprecated since 8.0">
-  <p>Use <code>openvox-agent</code> instead.</p>
-</vox-callout>
-```
+<vox-code-block language="html">
+&lt;vox-callout variant="warning" heading="Deprecated since 8.0"&gt;
+  &lt;p&gt;Use &lt;code&gt;openvox-agent&lt;/code&gt; instead.&lt;/p&gt;
+&lt;/vox-callout&gt;
+</vox-code-block>
 
 ## API
 

diff --git a/docs/components/card/index.md b/docs/components/card/index.md
@@ -22,12 +22,12 @@ title: "Card"
   </vox-card>
 </div>
 
-```html
-<vox-card heading="OpenVox Server" href="https://docs.openvoxproject.org">
-  <span slot="icon"><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="13" y="6" width="22" height="11" rx="2.5"/><line x1="13" y1="11.5" x2="35" y2="11.5" stroke-width="1.4"/><path d="M24 17 L14 34 M24 17 L24 34 M24 17 L34 34"/><circle cx="14" cy="36" r="2.4" fill="currentColor" stroke="none"/><circle cx="24" cy="36" r="2.4" fill="currentColor" stroke="none"/><circle cx="34" cy="36" r="2.4" fill="currentColor" stroke="none"/></svg></span>
+<vox-code-block language="html">
+&lt;vox-card heading="OpenVox Server" href="https://docs.openvoxproject.org"&gt;
+  &lt;span slot="icon"&gt;&lt;svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"&gt;&lt;rect x="13" y="6" width="22" height="11" rx="2.5"/&gt;&lt;line x1="13" y1="11.5" x2="35" y2="11.5" stroke-width="1.4"/&gt;&lt;path d="M24 17 L14 34 M24 17 L24 34 M24 17 L34 34"/&gt;&lt;circle cx="14" cy="36" r="2.4" fill="currentColor" stroke="none"/&gt;&lt;circle cx="24" cy="36" r="2.4" fill="currentColor" stroke="none"/&gt;&lt;circle cx="34" cy="36" r="2.4" fill="currentColor" stroke="none"/&gt;&lt;/svg&gt;&lt;/span&gt;
   Installation and configuration of the server components.
-</vox-card>
-```
+&lt;/vox-card&gt;
+</vox-code-block>
 
 ## Badge
 
@@ -45,13 +45,13 @@ Use the `badge` slot to place a badge or label in the top-right corner of the ca
   </vox-card>
 </div>
 
-```html
-<vox-card heading="Design Patterns">
-  <span slot="icon"><vox-icon name="blocks" size="lg"></vox-icon></span>
-  <vox-badge slot="badge" variant="danger">Pro</vox-badge>
+<vox-code-block language="html">
+&lt;vox-card heading="Design Patterns"&gt;
+  &lt;span slot="icon"&gt;&lt;vox-icon name="blocks" size="lg"&gt;&lt;/vox-icon&gt;&lt;/span&gt;
+  &lt;vox-badge slot="badge" variant="danger"&gt;Pro&lt;/vox-badge&gt;
   Grab-and-go patterns for common site, app, and online product workflows.
-</vox-card>
-```
+&lt;/vox-card&gt;
+</vox-code-block>
 
 ## Footer
 
@@ -72,13 +72,13 @@ same row line up their footers even when body length varies.
   </vox-card>
 </div>
 
-```html
-<vox-card heading="puppetdb">
-  <span slot="badge">8.1.0</span>
+<vox-code-block language="html">
+&lt;vox-card heading="puppetdb"&gt;
+  &lt;span slot="badge"&gt;8.1.0&lt;/span&gt;
   Installs PostgreSQL and PuppetDB, sets up the connection to Puppet master.
-  <span slot="footer">313,347,865 downloads</span>
-</vox-card>
-```
+  &lt;span slot="footer"&gt;313,347,865 downloads&lt;/span&gt;
+&lt;/vox-card&gt;
+</vox-code-block>
 
 ## API
 

diff --git a/docs/components/checkbox/index.md b/docs/components/checkbox/index.md
@@ -12,11 +12,11 @@ title: "Checkbox"
   <vox-checkbox disabled>Unavailable option</vox-checkbox>
 </div>
 
-```html
-<vox-checkbox name="subscribe" checked>
+<vox-code-block language="html">
+&lt;vox-checkbox name="subscribe" checked&gt;
   Subscribe to release announcements
-</vox-checkbox>
-```
+&lt;/vox-checkbox&gt;
+</vox-code-block>
 
 ## API