Lily Design System™

Code

A code component displays an inline code span for showing short code snippets, variable names, file paths, or commands within surrounding text. It visually distinguishes code from prose to improve readability.

This headless component uses the native HTML <code> element for semantic correctness, ensuring assistive technologies can identify inline code content.

Example

const x = 42;
Show demo markup 
<code class="code">const x = 42;</code>
Usage example 
<p>Use the <Code>console.log()</Code> function for debugging.</p>
<p>Set the <Code>--primary-color</Code> CSS variable.</p>
Show Svelte source 
// In your Svelte component:
import Code from "lily-design-system-svelte-headless/components/Code/Code.svelte";

<Code>
  <!-- content -->
</Code>

Usage

<p>Use the <Code>console.log()</Code> function for debugging.</p>
<p>Set the <Code>--primary-color</Code> CSS variable.</p>

Props

  • children: slot (required) -- the code text content
  • ...restProps: Any additional HTML attributes

Keyboard Interactions

  • None -- code spans are informational, not interactive

ARIA

  • No additional ARIA attributes needed -- the <code> element provides semantic meaning natively

When to Use

  • Use for short inline code snippets within surrounding text, such as variable names, CSS classes, or HTML elements.
  • Use when displaying file paths, terminal commands, or configuration keys inline.
  • Use to visually distinguish code from prose for improved readability.

When Not to Use

  • Do not use for multi-line code -- use CodeBlock instead.
  • Do not use for non-code emphasis -- use <strong> or <em> for standard text formatting.
  • Do not use for terminal-style presentation -- use MockupShell for a command-line appearance.

Headless

This component provides a semantic <code> element with zero visual styling. The consumer is responsible for all CSS including font family, background color, padding, border radius, and text color.

Styles

The consumer provides all CSS styling. The component renders with a .code class for targeting. No default styles are included -- this is a fully headless component.

Testing

  • Verify the component renders a <code> element with class code
  • Verify child content is rendered correctly
  • Verify pass-through attributes are applied

Advice

  • Designers: Use a monospace font to distinguish code from prose. A subtle background color helps code stand out within paragraphs.
  • Developers: Use Code for inline snippets and CodeBlock for multi-line code. No ARIA attributes are needed beyond the semantic <code> element.

Implementation Notes

  • Uses native <code> element for semantic inline code
  • Content is provided through child elements
  • No interactive behavior -- purely presentational
  • Consumer styles the code appearance (font, background, padding)

Related components

  • code-block — a block of formatted code with optional line numbers and line highlighting
  • kbd — show keyboard shortcuts and key combinations in a styled inline element

References

  • MDN <code> element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: code
  • PascalCase: Code
  • Description: an inline code span for displaying short code snippets within surrounding text
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <code>
  • CSS class: .code
  • Interactive: no

ARIA

  • No additional ARIA attributes needed -- the <code> element provides semantic meaning natively

Keyboard

  • None -- code spans are informational, not interactive

Props

  • children: slot (required) -- the code text content
  • ...restProps: Any additional HTML attributes