Code Block

Framework-owned code presentation for semantic pre/code markup. Axiom automatically adds language labels and a copy action without third-party syntax plugins.

HTML Example

<article class="card">
  <header>
    <h3>Release Notes</h3>
  </header>
  <p>Axiom01 now ships a native code-block component.</p>
</article>

CSS Example

.card {
  padding: var(--a-space-l);
  border: 1px solid var(--a-color-outline);
  border-radius: var(--a-border-radius-large);
  box-shadow: var(--a-shadow-medium);
}

JavaScript Example

const blocks = document.querySelectorAll('pre.code-block code');
blocks.forEach((block) => {
  const parent = block.closest('pre[data-component="code-block"]');
  if (parent) {
    console.log('Axiom01 code block found');
  }
});

Guidelines

  • Use semantic pre and code elements only.
  • Add data-component="code-block" and class="code-block" on pre.
  • Keep snippets concise and focused on one concept per block.
  • Prefer framework variables and semantic patterns in all examples.

Features

  • Semantic Structure - Built with native HTML5 elements for maximum reliability.
  • Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
  • Fully Responsive - Scales perfectly from mobile to desktop screens.
  • No JS Dependency - Core functionality relies on pure CSS for maximum performance.
  • Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Code Block component is designed for versatile implementation across modern web applications. Ideal scenarios include:

  • Dashboards & Admin Panels - Structured data presentation and interface control.
  • Content Management Systems - Organizing complex information hierarchies and media.
  • E-Commerce Platforms - Enhancing product discovery and user workflows.
  • Marketing Sites - Highlighting key product offerings cleanly and effectively.
  • SaaS Applications - Delivering native-feeling, responsive app experiences.

Accessibility

Axiom01 ensures that the Code Block component meets strict WCAG standards out of the box:

  • Keyboard Navigation - Fully navigable using standard Tab and Arrow key workflows.
  • Screen Reader Support - Requires minimal manual ARIA labeling due to semantic HTML roots.
  • Focus Management - Visible, high-contrast focus indicators without layout shifting.
  • Color Contrast - OKLCH math guarantees perfect WCAG AAA contrast ratios in both light and dark modes.
  • Reduced Motion - Respects system-level prefers-reduced-motion settings for any internal animations.