1. Direct Copy with data-copy

Copy predefined text directly from the button attribute. Click any button below to copy its value:

2. Copy from Target Element with data-copy-target

Copy text from another element by targeting its ID. The button below copies the code from the box:

3. Click Element to Copy with data-click-copy

Make any element itself copyable. Click the email below to copy it:

4. Automatic Code Block Copy

Automatic - Any <pre><code> block automatically gets a copy icon. No JavaScript code needed, just use HTML:

// This code block automatically has a copy icon
// No JavaScript required - it just works!
function example() {
  console.log("Look at the top right corner!");
  return true;
}

5. Programmatic API

Manual - Write JavaScript code to copy text in custom scenarios (e.g., after form submission, custom button logic):

// Copy text from your JavaScript code
ZenoCopyToClipboard.copy("Text to copy", {
  successMessage: "Copied!",
  showToast: true
});

// Example: Copy on button click
button.addEventListener("click", () => {
  ZenoCopyToClipboard.copy("Custom text");
});

Programmatic API

// Share programmatically
ZenoShare.share({
  title: "My Title",
  text: "Check this out!",
  url: "https://example.com"
});

The back to top button automatically appears when you scroll down more than 300px. It's already active on this page - try scrolling down!

The button is positioned in the bottom-right corner and provides smooth scrolling back to the top.

Title - Main Page Heading

Subtitle - Supporting text that appears below the main title

Section Title

Use .section-title for major section headings. It provides consistent spacing and styling.

Subsection Title

Use .subsection-title for nested sections within a main section.

Padding Utilities

Directional Padding

• .pt-*, .pb-*, .pl-*, .pr-* - Top, bottom, left, right
• .px-* - Horizontal (left & right)
• .py-* - Vertical (top & bottom)

Margin Utilities

Directional Margin

• .mt-*, .mb-*, .ml-*, .mr-* - Top, bottom, left, right
• .mx-* - Horizontal (left & right)
• .my-* - Vertical (top & bottom)

Display & Direction

• .flex - Display flex
• .flex-inline - Inline flex
• .flex-column - Column direction
• .flex-row - Row direction
• .flex-wrap - Allow wrapping
• .flex-nowrap - No wrapping
• .flex-1 - Flex: 1
• .flex-auto - Flex: auto
• .flex-none - Flex: none

Alignment

Justify Content

Quick Combinations

• .flex-center - Flex with center alignment (items & justify)
• .flex-between - Flex with space-between and center alignment

• .gap-sm - 8px gap
• .gap-md - 16px gap
• .gap-lg - 24px gap

Text Color Utilities

Background Color Utilities

Text Alignment

• .text-center - Center align text

Complete Color Utility Reference

• Text Colors: .text-primary, .text-secondary, .text-tertiary, .text-inverse, .text-success, .text-warning, .text-danger, .text-info, .text-accent, .text-muted
• Background Colors: .bg-primary, .bg-secondary, .bg-accent, .bg-success, .bg-warning, .bg-danger, .bg-info, .bg-surface, .bg-primary-bg, .bg-secondary-bg, .bg-tertiary-bg

• .hide-mobile - Hide on mobile, show on tablet+
• .hide-desktop - Show on mobile, hide on tablet+

Grid Classes

• .grid - Base grid container
• .grid-2 - 2 columns (responsive: 1 col mobile, 2 cols tablet+)
• .grid-3 - 3 columns (responsive: 1 col mobile, 2 cols tablet, 3 cols desktop)
• .grid-4 - 4 columns (responsive: 1 col mobile, 2 cols tablet, 4 cols desktop)

Example: 3-Column Grid