Posiiotn: Inline, Fixed, Outside or Fixed with mouse animation
A This is a demo paragraph that can be copied by clicking the button, showing how text behaves in the interface and how users interact with copy functionality in a simple way
ⓘ Button ‘Fixed ' ⓘ Icon + Tooltip
B This is a demo paragraph that can be copied by clicking the button, showing how text behaves in the interface and how users interact with copy functionality in a simple way
ⓘ Button ‘Fixed ' ⓘ Text Button + Tooltip
C This is a demo paragraph that can be copied by clicking the button, showing how text behaves in the interface and how users interact with copy functionality in a simple way
ⓘ Button ‘Outside ' ⓘ Text Button + Tooltip
Text Block
Text paragraph
1 This is a demo paragraph that can be copied by clicking the button, showing how text behaves in the interface and how users interact with copy functionality in a simple way
2 This is a demo paragraph that can be copied by clicking the button, showing how text behaves in the interface and how users interact with copy functionality in a simple way
3 This is a demo paragraph that can be copied by clicking the button, showing how text behaves in the interface and how users interact with copy functionality in a simple way
Text management comes in two forms: returning exactly what is displayed, or returning an alternative value that the visitor never sees directly. A typical use case: a coupon block shows a descriptive label but copies only the code.
This is a demo paragraph showing how the component works when the displayed text and the copied text are exactly the same. What you see is what lands on the clipboard, word for word, with no override applied.
ⓘ Text Button + Blink (fast speed) + Click to copy
Plain text Standard
Text paragraph
Text displayed: This is the text that appears inside the component. It can be as long or as short as you need, styled through the inspector, and read by the visitor on the page. When Override Text is enabled, this is not what gets copied.
ⓘ Text Button + Blink (normal speed) + Click to copy
Plain Text 2x
You can provide alternative text to the one displayed
Code
The Code layout includes a header bar to identify the snippet before reading it, with a label and an optional icon. When the content runs long, the block height can be capped independently of the actual code length, keeping the page layout clean with a scrollbar handling the rest.
Code Custom title
ⓘ Custom Title + Blink (fast speed)
Code
Support: CSS, HTML, JavaScript, Python, TypeScript, PHP and more
Code Custom title
ⓘ Icon + Custom Title + Tooltip + Maximum height for long data with scroll bar + Blink (fast speed)
Code
Support: CSS, HTML, JavaScript, Python, TypeScript, PHP and more
Demo file included ready to use styles
The Project includes a curated collection of ready-to-use designs, thoughtfully organized into categories to help you quickly find the perfect style for your project. Each preset is crafted to combine functionality with visual appeal, making it easy to enhance your pages with minimal effort.