Intro
Clipboard is a fully customizable copy-to-clipboard component for Elements, designed to copy plain text to the clipboard with a single click. Multiple layout styles, inline, block, outside, hover, and code, adapt to any content type and page design without compromise.
What sets it apart is the feedback system. Three independent signals, a tooltip, a button label swap, and a blink on the copied text, can be used separately or in combination, each fully styled through the inspector.
Clipboard Options
Template
✓ How the copy button relates to the content around it is not a cosmetic choice. It affects how naturally the component fits into your layout and how the user perceives the interaction. Five layouts cover the most common scenarios, each designed for a specific context.
Word: inline with the text.
Block: fixed in the top-right corner, overlaid on the content.
Outside: button below the container, visually separate.
Hover: button hidden, appears on mouse over.
Code: monospace block with header bar, language label, and optional icon.
Content - Text
✓ The text that appears in the component and the text that gets copied are two independent things. By default they are the same, what the user sees is what lands on the clipboard. Enable Override Text to break that link and define a separate value to copy, useful when you want to display a short label but copy a full URL, a long string, or any value that would be awkward to show directly on the page.
Text to display: the visible content inside the component.
Override Text: enable to copy something different from what is displayed.
Text to copy: the value that will be copied when Override is active.
Content - Code
The Code layout has its own dedicated content panel. Paste any code snippet directly into the text area, it will be displayed exactly as entered, preserving spacing and line breaks. A scrollable container with a configurable maximum height keeps long blocks manageable without breaking the page layout.
The header bar carries a language label and an optional icon, both purely informational. The label accepts any text and seven preset icons cover the most common languages.
Code to display: the snippet that will be shown and copied.
Max Height: enable to cap the block height and activate vertical scroll.
Code label: the text shown in the header bar.
Color: the color of the label text.
Icon: optional language icon displayed next to the label.
Icon Size: controls the size of the icon.
ⓘ Code preview is only available in the browser.
Text Style
✓ Full control over the appearance of the text displayed in the component. Font, size, weight, color, alignment, spacing, line height, case, underline, italic, and shadow follow the standard Elements text panel conventions, so the options will feel immediately familiar.
Text Interactions
✓ These two features turn the text itself into an active element. Rather than relying solely on the button, the text area becomes part of the interaction, responding to clicks and confirming the action visually.
Blink: When something is copied, the text briefly fades and returns, drawing attention to exactly what has just landed on the clipboard. Speed is adjustable between fast, normal, and slow. Visible in the browser only.
Click to Copy: When enabled, clicking anywhere on the text triggers the copy action. Particularly effective for short content like coupon codes, where a larger click area feels natural and reduces friction.
ⓘ Click to Copy is available for plain text layouts only.
Button
The copy button adapts to three presentation modes: icon only, text only, or icon and text combined. Each serves a different design intent, a minimal icon for compact layouts, a text label for clarity, or both together when you want to leave no ambiguity about the action.
The button carries two states. Before copying it shows one label, after copying it switches to another. Both are fully editable, making the label swap one of the simplest and most immediate feedback signals the component offers.
Styling options are standard: font, size, color, background, padding, margin, minimum width, border radius, and shadow, following Elements conventions.
ⓘ Set a minimum width to prevent the button from resizing when the label switches between Copy and Copied.
Tooltip
The tooltip is the most expressive feedback signal the component offers. It appears above the button the moment something is copied, animated, and disappears after a configurable delay. Five entrance animations, fade, slide up, slide down, scale, and bounce, give it character and draw attention without being intrusive. The duration controls how long it stays visible before fading out.
Content is fully editable. The tooltip can carry a text label, an emoji, an icon character, or any combination, so it adapts to the tone of your project as much as to its visual style. A small directional tip below the bubble can be shown or hidden depending on how the tooltip is positioned relative to the button.
Styling options are standard: font, size, text color, background, padding, margin, border radius, and shadow, following the same conventions as the Button panel.
ⓘ Enable Preview to see the tooltip statically in edit mode. Animation and final position are only visible in the browser.
Spacing
✓ Standard Elements margin and padding controls for the component container. Enable to activate, disable to let the surrounding layout handle spacing.
Background
Background
An optional container background with color, opacity, and shadow. Disable it to inherit the background from the parent element instead
Background: color and Opacity: from fully transparent to solid.
Shadow: box shadow applied to the container.
Borders
✓ Standard Elements border controls. Enable to activate, then set type, color, opacity, width, and corner radius.
Advanced
✓ Fine-tune visibility and extend the component with custom classes for edge cases and advanced layouts.
Custom CSS classes field