Code block

a monospaced block with a language label and a one-click copy button.

Anatomy

bash
npm install @design-foundry/lucent-angular
1 host .lucent-code-block
2 .lucent-code-block__header holds the language and the copy button
3 .lucent-code-block__body is the <pre><code>

Using it

Angular lucent-code-block
import { LucentCodeBlock } from '@design-foundry/lucent-angular';
Stylesheet .lucent-code-block
@design-foundry/lucent-styles/packs/messaging.css

API

NameKindTypeDefaultDescription
language input string '' language label in the header.
code input string '' the code.

Theming

Color (3)
Size & spacing (3)
Border & radius (2)
Type (7)