Code

Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.

Displays inline or block code with a monospace font.

Import

import { Code } from "~lib/typography";

Props

Name	Type	Required	Default	Description
children	ReactNode	Yes	N/A	Code content to display
inline	boolean	No	false	Render as inline <code>
truncate	boolean	No	false	Truncate overflow (block)
fit	"content" | "fill" | number	No	"content"	Container height behavior

Examples

Block Code

Block in Storybook öffnen

Inline Code

Inline in Storybook öffnen

Multi-Line

Multi Line in Storybook öffnen

Fit Modes

Fit Content (default)

Container sizes to its text content. Use when the text should take only as much space as it needs.

Block in Storybook öffnen

Fit Fill

Container fills available flex space. Use inside flex layouts when the text should expand to fill remaining space. Text that runs past that space is cut at the container's edge instead of drawn over the block below, which keeps a widget's saved render tidy when it is laid out in a smaller box than the one it was measured in.

Fit Fill in Storybook öffnen

Fixed Height

Container has a hard-coded pixel height. Use when you need a precise, known container size.

Fit Fixed in Storybook öffnen

See Also

• Paragraph - Body text
• Blockquote - Quoted text