Components · Code · Use

Code

Code content, syntax highlighting, and expansion behavior belong to the application; the recipe owns the surrounding surface and controls.

CSS

.button-root {
	color: var(--md-sys-color-on-primary);
}

Markup

<section class="code-root">
	<header class="code-header">
		<span class="code-title">CSS</span>
		<button type="button" class="code-copy-trigger button-root button-text">Copy</button>
	</header>
	<pre class="code-content"><code
			>.button-root &#123;
	color: var(--md-sys-color-on-primary);
&#125;</code
		></pre>
</section>