Data — Component Gallery
Format
Format Number
Number
Decimal
Percent
No grouping
Fixed 2 decimals
USD
GBP
EUR
JPY
View DSL Source
stack(gap="xs") row(gap="sm") text(style="width:10rem;color:var(--wa-color-text-subtle)") Decimal format-number(value=12345.67) row(gap="sm") text(style="width:10rem;color:var(--wa-color-text-subtle)") Percent format-number(value=0.753 type="percent") row(gap="sm") text(style="width:10rem;color:var(--wa-color-text-subtle)") No grouping format-number(value=1234567 without-grouping="true") row(gap="sm") text(style="width:10rem;color:var(--wa-color-text-subtle)") Fixed 2 decimals format-number(value=9.5 minimum-fraction-digits=2 maximum-fraction-digits=2) divider row(gap="sm") text(style="width:10rem;color:var(--wa-color-text-subtle)") USD format-number(value=2000 type="currency" currency="USD" lang="en-US") row(gap="sm") text(style="width:10rem;color:var(--wa-color-text-subtle)") GBP format-number(value=2000 type="currency" currency="GBP" lang="en-GB") row(gap="sm") text(style="width:10rem;color:var(--wa-color-text-subtle)") EUR format-number(value=2000 type="currency" currency="EUR" lang="de") row(gap="sm") text(style="width:10rem;color:var(--wa-color-text-subtle)") JPY format-number(value=2000 type="currency" currency="JPY" lang="ja")Date
Full date
Short date
Numeric
Weekday
Time (12h)
Time (24h)
English
German
French
Japanese
View DSL Source
stack(gap="xs") row(gap="sm") text(style="width:12rem;color:var(--wa-color-text-subtle)") Full date format-date(date="2026-04-30T12:00:00Z" month="long" day="numeric" year="numeric") row(gap="sm") text(style="width:12rem;color:var(--wa-color-text-subtle)") Short date format-date(date="2026-04-30T12:00:00Z" month="short" day="numeric" year="numeric") row(gap="sm") text(style="width:12rem;color:var(--wa-color-text-subtle)") Numeric format-date(date="2026-04-30T12:00:00Z" month="numeric" day="numeric" year="numeric") row(gap="sm") text(style="width:12rem;color:var(--wa-color-text-subtle)") Weekday format-date(date="2026-04-30T12:00:00Z" weekday="long") row(gap="sm") text(style="width:12rem;color:var(--wa-color-text-subtle)") Time (12h) format-date(date="2026-04-30T14:30:00Z" hour="numeric" minute="numeric" hour-format="12") row(gap="sm") text(style="width:12rem;color:var(--wa-color-text-subtle)") Time (24h) format-date(date="2026-04-30T14:30:00Z" hour="numeric" minute="2-digit" hour-format="24") divider row(gap="sm") text(style="width:12rem;color:var(--wa-color-text-subtle)") English format-date(date="2026-04-30T12:00:00Z" month="long" day="numeric" year="numeric" lang="en-US") row(gap="sm") text(style="width:12rem;color:var(--wa-color-text-subtle)") German format-date(date="2026-04-30T12:00:00Z" month="long" day="numeric" year="numeric" lang="de") row(gap="sm") text(style="width:12rem;color:var(--wa-color-text-subtle)") French format-date(date="2026-04-30T12:00:00Z" month="long" day="numeric" year="numeric" lang="fr") row(gap="sm") text(style="width:12rem;color:var(--wa-color-text-subtle)") Japanese format-date(date="2026-04-30T12:00:00Z" month="long" day="numeric" year="numeric" lang="ja")Bytes
512 B
1.5 KB
4.2 MB
2.4 GB
long
short
narrow
Bits (Mb)
View DSL Source
stack(gap="xs") row(gap="sm") text(style="width:10rem;color:var(--wa-color-text-subtle)") 512 B format-bytes(value=512) row(gap="sm") text(style="width:10rem;color:var(--wa-color-text-subtle)") 1.5 KB format-bytes(value=1536) row(gap="sm") text(style="width:10rem;color:var(--wa-color-text-subtle)") 4.2 MB format-bytes(value=4404019) row(gap="sm") text(style="width:10rem;color:var(--wa-color-text-subtle)") 2.4 GB format-bytes(value=2576980378) divider row(gap="sm") text(style="width:10rem;color:var(--wa-color-text-subtle)") long format-bytes(value=1572864 display="long") row(gap="sm") text(style="width:10rem;color:var(--wa-color-text-subtle)") short format-bytes(value=1572864 display="short") row(gap="sm") text(style="width:10rem;color:var(--wa-color-text-subtle)") narrow format-bytes(value=1572864 display="narrow") divider row(gap="sm") text(style="width:10rem;color:var(--wa-color-text-subtle)") Bits (Mb) format-bytes(value=4404019 unit="bit")Progress
Progress Bar Values
Values
View DSL Source
stack(gap="sm") progress-bar(value=25 label="25%") progress-bar(value=50 label="50%") progress-bar(value=75 label="75%") progress-bar(value=100 label="Complete")Indeterminate
View DSL Source
progress-bar(indeterminate label="Loading…")Progress Ring Values
Values
View DSL Source
row(gap="md" align="center") progress-ring(value=0) progress-ring(value=25) progress-ring(value=50) progress-ring(value=75) progress-ring(value=100)Sizes
View DSL Source
row(gap="md" align="center") progress-ring(value=65 size=48) progress-ring(value=65 size=80) progress-ring(value=65 size=120)Qr-code
QR Code
Variants
View DSL Source
row(gap="md" align="start") qr-code(value="https://webawesome.com/" label="Standard" size=128) qr-code(value="https://webawesome.com/" label="Rounded" size=128 radius=0.4) qr-code(value="https://webawesome.com/" label="Large" size=200)Relative-time
Relative Time Ranges
Ranges
5 minutes ago
3 hours ago
Yesterday
5 days ago
2 months ago
1 year ago
View DSL Source
stack(gap="xs") row(gap="sm") text(style="width:9rem;color:var(--wa-color-text-subtle)") 5 minutes ago relative-time(date="2026-04-30T11:55:00Z") row(gap="sm") text(style="width:9rem;color:var(--wa-color-text-subtle)") 3 hours ago relative-time(date="2026-04-30T09:00:00Z") row(gap="sm") text(style="width:9rem;color:var(--wa-color-text-subtle)") Yesterday relative-time(date="2026-04-29T12:00:00Z") row(gap="sm") text(style="width:9rem;color:var(--wa-color-text-subtle)") 5 days ago relative-time(date="2026-04-25T12:00:00Z") row(gap="sm") text(style="width:9rem;color:var(--wa-color-text-subtle)") 2 months ago relative-time(date="2026-02-28T12:00:00Z") row(gap="sm") text(style="width:9rem;color:var(--wa-color-text-subtle)") 1 year ago relative-time(date="2025-04-30T12:00:00Z")Formats
long
short
narrow
auto
always
View DSL Source
stack(gap="xs") row(gap="sm") text(style="width:5rem;color:var(--wa-color-text-subtle)") long relative-time(date="2026-02-28T12:00:00Z" format="long") row(gap="sm") text(style="width:5rem;color:var(--wa-color-text-subtle)") short relative-time(date="2026-02-28T12:00:00Z" format="short") row(gap="sm") text(style="width:5rem;color:var(--wa-color-text-subtle)") narrow relative-time(date="2026-02-28T12:00:00Z" format="narrow") divider row(gap="sm") text(style="width:5rem;color:var(--wa-color-text-subtle)") auto relative-time(date="2026-04-29T12:00:00Z" numeric="auto") row(gap="sm") text(style="width:5rem;color:var(--wa-color-text-subtle)") always relative-time(date="2026-04-29T12:00:00Z" numeric="always")Languages
English
German
French
Spanish
Chinese
Japanese
Arabic
Russian
View DSL Source
stack(gap="xs") row(gap="sm") text(style="width:8rem;color:var(--wa-color-text-subtle)") English relative-time(date="2026-04-25T12:00:00Z" lang="en-US") row(gap="sm") text(style="width:8rem;color:var(--wa-color-text-subtle)") German relative-time(date="2026-04-25T12:00:00Z" lang="de") row(gap="sm") text(style="width:8rem;color:var(--wa-color-text-subtle)") French relative-time(date="2026-04-25T12:00:00Z" lang="fr") row(gap="sm") text(style="width:8rem;color:var(--wa-color-text-subtle)") Spanish relative-time(date="2026-04-25T12:00:00Z" lang="es") row(gap="sm") text(style="width:8rem;color:var(--wa-color-text-subtle)") Chinese relative-time(date="2026-04-25T12:00:00Z" lang="zh-CN") row(gap="sm") text(style="width:8rem;color:var(--wa-color-text-subtle)") Japanese relative-time(date="2026-04-25T12:00:00Z" lang="ja") row(gap="sm") text(style="width:8rem;color:var(--wa-color-text-subtle)") Arabic relative-time(date="2026-04-25T12:00:00Z" lang="ar") row(gap="sm") text(style="width:8rem;color:var(--wa-color-text-subtle)") Russian relative-time(date="2026-04-25T12:00:00Z" lang="ru")Stat-card
KPI Stat Cards
Positive Trend
Revenue
$42,500
+12.5%
Active Users
1,240
+8.2%
View DSL Source
row(gap="md") stat-card(label="Revenue" value="$42,500" trend="+12.5%" direction="up") stat-card(label="Active Users" value="1,240" trend="+8.2%" direction="up")Negative Trend
Churn Rate
2.4%
-0.5%
Support Tickets
84
-15.0%
View DSL Source
row(gap="md") stat-card(label="Churn Rate" value="2.4%" trend="-0.5%" direction="down") stat-card(label="Support Tickets" value="84" trend="-15.0%" direction="down")Neutral
Avg. Session
4m 12s
Server Uptime
99.99%
View DSL Source
row(gap="md") stat-card(label="Avg. Session" value="4m 12s") stat-card(label="Server Uptime" value="99.99%")Timeline
Activity Timelines
Standard
Order Placed
Yesterday, 2:14 PM
Payment Confirmed
Yesterday, 2:15 PM
Shipped
Today, 9:30 AM
Delivered
View DSL Source
timeline timeline-item(label="Order Placed" description="Yesterday, 2:14 PM" icon="shopping-cart") timeline-item(label="Payment Confirmed" description="Yesterday, 2:15 PM" icon="credit-card") timeline-item(label="Shipped" description="Today, 9:30 AM" icon="truck" status="active") timeline-item(label="Delivered" icon="check" status="pending")Compact
v1.2.0 released
Security patch applied
Database migration completed
View DSL Source
timeline timeline-item(label="v1.2.0 released") timeline-item(label="Security patch applied") timeline-item(label="Database migration completed")