#Code

Geist Mono for code, identifiers and machine-readable values — anything read as literal rather than as prose. This ramp is for inline fragments; multi-line blocks are CodeSnippet, drawn with looser leading so stacked lines breathe.

Source · Storybook

#Usage

import { Code } from '@wallarm-org/design-system/Code';

#Examples

#Sizes

The ramp. Never add letter-spacing to it — monospace depends on a fixed character cell, and tracking breaks alignment in diffs, terminal output and anything measured in ch.

#Weights

Weight for emphasis within code, which buys less here than elsewhere: in a monospace run, bold is harder to spot than colour.

#Colors

The same de-emphasis ladder as Text, for dimming part of an identifier rather than all of it.

#Multiline

What happens when code wraps in this ramp — tight leading, because it is drawn for one line. Past a couple of lines, reach for CodeSnippet.

#Italic

italic is a modifier rather than a step, pairing with any size and weight. Conventionally it marks a placeholder the reader is meant to replace.

#As child

asChild puts the monospace styling on your own element, for when the tag carries meaning the styling should not override.

#Props