Code

The Code element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code.

CodeContent();

---

Usage

import { Code } from "@newfold/ui-component-library";

<Code>
    CodeContent();
</Code>

---

Variants

The Code provides two variants.

1. Default (default)

The default variant renders an inline code element.

console.log('default');

<Code>
    console.log('default');
</Code>

info

If the parent element has a display flex property with column direction, the code element will be streched to full width. To avoid this, add nfd-w-fit class to the code element.

console.log('default but full width');console.log('default with `nfd-w-fit` class');

<div className="nfd-flex nfd-flex-col nfd-gap-2">
    <Code>console.log('default but full width');</Code>
    <Code className="nfd-w-fit">console.log('default with `nfd-w-fit` class');</Code>
</div>

2. Block

The block variant renders a block (full width) code element.

console.log('block');

<Code variant="block">
    console.log('block');
</Code>

---

Props

Attribute	Type	Description	Default
children*	node |	The content of the code element.	-
variant	default | block |	The variant of the code element.	default
className	string |	-	-