Code Block Component

The Code Block component displays formatted code samples with a language label and a built-in copy action. It is useful for documentation, examples, and developer-facing interfaces where code needs consistent presentation.

Usage

<qds-code-block language="html">
<qds-button label="Run"></qds-button>
</qds-code-block>

Attributes

Name	Type	Default	Description
language	String	text	Language label displayed in the header

Properties

Name	Type	Default	Description
value	String	''	Code content rendered inside the block and copied to the clipboard

CSS Parts

The component’s shadow DOM can be styled using CSS ::part selectors:

Part	Description
frame	The outer code block frame
toolbar	The header row containing the language label and copy button
language	The language label
copy-button	The clipboard copy action
pre	The preformatted content area
code	The code element

Events

Event	Detail	Description
copied	{ language, value }	Fired when the code content is copied successfully
copyerror	{ language, value, error }	Fired when clipboard copy fails

Examples

HTML Example

<qds-code-block language="html">
<section class="hero">
  <h1>Quantum Design System</h1>
  <p>Reusable primitives for consistent interfaces.</p>
</section>
</qds-code-block>

JavaScript Example

const codeBlock = document.querySelector('qds-code-block');

codeBlock.addEventListener('copied', (event) => {
  console.log(`Copied ${event.detail.language} sample`);
});

Programmatic Content

const block = document.querySelector('#dynamicBlock');
block.language = 'css';
block.value = `:root {
  --theme-accent-primary: var(--brand-middle-blue);
}`;

Accessibility

• The copy action is keyboard accessible
• The language label remains visible without relying on color
• The copy button announces its purpose through an ARIA label

Browser Support

Works in all modern browsers:

• Chrome
• Firefox
• Safari
• Edge