Code
Typography
Presentational
Introduction
An inline, monospace typographic component used to showcase short program snippets, console commands, or API paths directly inside paragraph prose.
The Code component is fully integrated as a code block inside the Page Builder, enabling Sveltia CMS authors to configure outline borders, color themes, font sizing, and code text directly within CMS layout nodes.
Usage
These configurations represent exactly how page-builder block items are constructed.
1. Minimal Installation Command (Subtle Variant)
A standard inline code block rendering a short installation command. Ideal for setting a clean monospace background without dominating focus.
{
"type": "code",
"text": "npm install @park-ui/hono",
"variant": "subtle",
"size": "md"
}
npm install @park-ui/hono2. API Method Path (Outline Variant / Large Sizing)
An outlined, color-themed monospace label suitable for listing API endpoints, status codes, or route URLs in technical documentation guides.
{
"type": "code",
"text": "GET /api/v1/workspace",
"variant": "outline",
"size": "lg",
"colorPalette": "blue"
}
GET /api/v1/workspaceProps
| Property | CMS Field Type | Default | Description / Supported Options |
|---|---|---|---|
Monospace Text (text) | string | - | The raw code text or command to render on-screen. |
Visual Variant (variant) | select | "subtle" | Background tint style. • "subtle" — Standard soft gray backdrop. • "solid" — Saturated, opaque contrast background. • "outline" — Transparent background paired with a thin outer border. • "surface" — Modern card shaded style. |
Size Scale (size) | select | "md" | Controls font size and horizontal padding. • Options: "sm", "md", "lg", "xl". |
Color Theme (colorPalette) | select | - | Visual color theme applied to text, borders, and backgrounds. • Options: blue, green, red, purple, orange, amber, cyan, slate. |
Developer Notes & Accessibility
- Semantic HTML Element: Automatically compiles to a semantic
<code>HTML element on the server. This signals search engine bots and assistive devices that the text is program source content. - Single-Line Limitation: Designed exclusively for short, inline single-line snippets of text. For multi-line, formatted blocks of code, wrap the output inside a standard HTML
<pre>container block manually. - Panda CSS Monospace Font Stack: Font families map directly to optimized local monospace configurations (such as SFMono-Regular, Consolas, or Liberation Mono) to guarantee clean, proportional alignment across all devices.