Source Element Demo

Interactive demo showcasing all available CSS variables, orientation options, and constructor parameters

Basic Configuration

Orientation

Container Width: 400px

Source Type

Prefer URL Truncation

HTML Output Type

Complete HTML Document Component Only

Host

Username

Password

Color Variables

Color Presets

Border Color (--pf-color-border)

Light

Dark

Background Color (--pf-color-surface)

Light

Dark

Text Color (--pf-color-on-surface)

Light

Dark

Primary Color (--pf-color-primary)

Light

Dark

Positive Status Color (--pf-color-status-positive)

Light

Dark

Negative Status Color (--pf-color-status-negative)

Light

Dark

External Icon Background (--pf-color-external-icon-bg)

Light

Dark

Spacing & Sizing

Padding (--pf-padding): 1.25rem

Button Border Width (--pf-button-border-width): 0px

Button Border Color (--pf-button-border-color)

Light

Dark

Button Border Radius (--pf-button-border-radius): 50%

QR Code Size (--pf-qr-size): 74px

Title Font Size (--pf-font-title-medium): 1.25rem

Body Font Size (--pf-font-body-medium): 0.875rem

Small Body Font Size (--pf-font-body-small): 0.75rem

Label Font Size (--pf-font-label-medium): 0.875rem

Generated HTML

Debug Information

Element ID: demoSourceElement

Orientation: horizontal

Source Type: xtreme

Xtreme Host:

Xtreme Username:

Truncation Preferred: false

Container Width: 400px

CSS Variables Applied: 0

Source Element Demo

Basic Configuration

Color Variables

Spacing & Sizing

Generated HTML

Debug Information

Live Preview