Mockups
Code
A code mockup displays code inside a styled box that mimics a code editor, making it perfect for showcasing code in documentation, demos, or tutorials.
Basic examples
Mockup code with line prefix
The `mockup-code` class is tailored to enhance the presentation of your code with a stylish layout. Use `data-prefix` to incorporate additional prefixes before text, such as `$`, `>`, or numeric indicators.
npm i -D flyonui@latestMulti line
Code spanning multiple lines.
npm i -D flyonui@latestinstalling...Done!Highlighted line
Code example that highlights syntax.
npm i -D flyonui@latestinstalling...Warning!Scrollable body
Example of a scrollable code container.
Magnam dolore beatae necessitatibus nemopsum itaque sit. Et porro quae qui et et dolore ratione.Without prefix
Example of code without a prefix.
without prefixSemantic color
You can modify both the background and text colors.
can be any color!Class referenceThe component, style, color, state, size and modifier classes available for this component.
| Class | Type | Description |
|---|---|---|
mockup-code | component | Container element. |