Code

Inline code and code blocks with monospace font.

Inline Code

Use the --space-2 token for padding.

--button-height

Base

Class	Description
`.ui-code`	Base class

Size

Class	Value
`.ui-code--sm`	sm

Override these CSS custom properties to customize the component.

Token	Default	Description
`--ui-code-font-size`	`var(--ui-font-size-sm)`	Font size
`--ui-code-bg`	`var(--ui-color-bg-muted)`	Background color
`--ui-code-padding-x`	`var(--ui-space-1)`	Horizontal padding
`--ui-code-padding-y`	`var(--ui-space-0)`	Vertical padding
`--ui-code-radius`	`var(--ui-radius-sm)`	Corner radius
`--ui-code-font-size-block`	`var(--ui-font-size-sm)`	Font size block
`--ui-code-bg-block`	`var(--ui-color-bg-muted)`	Bg block
`--ui-code-padding-block`	`var(--ui-space-3)`	Vertical padding
`--ui-code-radius-block`	`var(--ui-radius-md)`	Radius block
`--ui-code-border-color-block`	`var(--ui-color-border)`	Border color block

Code Block

  .button {
  display: inline-flex;
  align-items: center;
}

<pre class="ui-code-block">
  <code>.button {
  display: inline-flex;
  align-items: center;
}</code>
</pre>

Code Block: Default

  .button {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
}

<pre class="ui-code-block">
  <code class="ui-code-block__code">.button {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
}</code>
</pre>

Code Block: Horizontal Overflow

  export function calculateGridRhythm(element: HTMLElement, unit: number): { violations: string[]; totalHeight: number } {
  const computed = getComputedStyle(element);
  return { violations: [], totalHeight: parseFloat(computed.height) };
}

<pre class="ui-code-block">
  <code class="ui-code-block__code">export function calculateGridRhythm(element: HTMLElement, unit: number): { violations: string[]; totalHeight: number } {
  const computed = getComputedStyle(element);
  return { violations: [], totalHeight: parseFloat(computed.height) };
}</code>
</pre>

Code Block: Compact

  npm install @teseor/css
import "@teseor/css/dist/index.css";

<pre class="ui-code-block ui-code-block--compact">
  <code class="ui-code-block__code">npm install @teseor/css
import "@teseor/css/dist/index.css";</code>
</pre>

Code Block: Line Numbers

  
    
      
      @layer components {
    
    
      
        .card {
    
    
      
          padding: var(--_padding);
    
    
      
          background: var(--_bg);
    
    
      
          border-radius: var(--_radius);
    
    
      
        }
    
    
      
      }

<pre class="ui-code-block ui-code-block--line-numbers">
  <code class="ui-code-block__code">
    <span class="ui-code-block__line">
      <span class="ui-code-block__line-number"></span>
      <span>@layer components {</span>
    </span>
    <span class="ui-code-block__line">
      <span class="ui-code-block__line-number"></span>
      <span>  .card {</span>
    </span>
    <span class="ui-code-block__line">
      <span class="ui-code-block__line-number"></span>
      <span>    padding: var(--_padding);</span>
    </span>
    <span class="ui-code-block__line">
      <span class="ui-code-block__line-number"></span>
      <span>    background: var(--_bg);</span>
    </span>
    <span class="ui-code-block__line">
      <span class="ui-code-block__line-number"></span>
      <span>    border-radius: var(--_radius);</span>
    </span>
    <span class="ui-code-block__line">
      <span class="ui-code-block__line-number"></span>
      <span>  }</span>
    </span>
    <span class="ui-code-block__line">
      <span class="ui-code-block__line-number"></span>
      <span>}</span>
    </span>
  </code>
</pre>

Code Block: Inline Code

Use var(--ui-space-2) for consistent spacing.

<!-- Use the related ui-code class for inline snippets. -->
<p>
  <span>Use </span>
  <code class="ui-code">var(--ui-space-2)</code>
  <span> for consistent spacing.</span>
</p>

Code Block: Compact With Line Numbers

  
    
      
      const name = "world";
    
    
      
      console.log(`Hello, ${name}`);

<pre class="ui-code-block ui-code-block--compact ui-code-block--line-numbers">
  <code class="ui-code-block__code">
    <span class="ui-code-block__line">
      <span class="ui-code-block__line-number"></span>
      <span>const name = "world";</span>
    </span>
    <span class="ui-code-block__line">
      <span class="ui-code-block__line-number"></span>
      <span>console.log(`Hello, ${name}`);</span>
    </span>
  </code>
</pre>