Mockup

Code or device mockups for examples and demonstrations. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• mockup-code, mockup-code-header, mockup-code-title, mockup-code-language, mockup-code-actions, mockup-code-body, mockup-phone, mockup-phone-camera
• mockup-phone-display

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<div class="mockup-code">
  <div class="mockup-code-header"><span class="mockup-code-title">Terminal</span></div>
  <div class="mockup-code-body focus-ring" role="region" tabindex="0" aria-label="Example command">
    <pre data-prefix="$"><code>bun add -d teacss</code></pre>
  </div>
</div>

Variants and composition

mockup-code supports an optional header, title, language, actions, and body. mockup-phone uses camera and display parts for a device frame.

In the header/body composition, each line is a direct pre > code under mockup-code-body. A line reserves a 3ch prefix column even when its data-prefix is empty. The body keeps code in LTR while the header follows the surrounding direction. Header titles and action groups can wrap.

Behavior and accessibility

Code lines may scroll horizontally. Put the accessible name, keyboard tab stop, and visible focus treatment on the body that actually scrolls. Keep text selectable. Any copy button needs application behavior and a unique target; mockups themselves are demonstrations, not runnable editors.

Reference

See the interactive Storybook specimen ↗. Continue to Modal or return to the Official preset overview.