Stat — Sigta UI

Trends — up, down & neutral

Active accounts 2,418 6.2% vs last 30d

Time to value 3.1d 0.4d slower

Seats in use 14 unchanged

Source

<div class="grid gap-3 sm:grid-cols-3">
        <sigta:stat label="Active accounts" value="2,418" delta="6.2% vs last 30d" trend="up" />
        <sigta:stat label="Time to value" value="3.1d" delta="0.4d slower" trend="down" />
        <sigta:stat label="Seats in use" value="14" delta="unchanged" />
    </div>

With sparkline slot

Monthly recurring $48.2k 9%

Source

<div class="max-w-xs">
        <sigta:stat label="Monthly recurring" value="$48.2k" delta="9%" trend="up">
            <svg viewBox="0 0 200 38" preserveAspectRatio="none" class="w-full h-[38px]" aria-hidden="true">
                <path d="M0 30 C30 28 40 20 70 22 S120 12 150 14 190 4 200 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                <circle cx="200" cy="6" r="3.5" fill="currentColor"/>
            </svg>
        </sigta:stat>
    </div>

Label + value only

Net retention 112%

Source

<div class="max-w-xs">
        <sigta:stat label="Net retention" value="112%" />
    </div>

Inline variant — borderless hero-meta figure

14 år bag tastaturet

1 fast lav timepris

2 måder at samarbejde på

Source

<div class="flex flex-wrap gap-[2.2rem]">
        <sigta:stat variant="inline" value="14 år" label="bag tastaturet" />
        <sigta:stat variant="inline" value="1" label="fast lav timepris" />
        <sigta:stat variant="inline" value="2" label="måder at samarbejde på" />
    </div>

Inverse tone — standalone boxed

Logged this week 12h 30m

Billable value 8.750 kr.

Source

<div class="grid gap-3 sm:grid-cols-2 max-w-md">
        <sigta:stat tone="inverse" label="Logged this week" value="12h 30m" />
        <sigta:stat tone="inverse" label="Billable value" value="8.750 kr." />
    </div>

Inverse tone — inline, composed on a dark panel

42h 10m Logged this customer

29.750 kr. Billable value

Source

<sigta:panel variant="inverse" class="max-w-sm gap-4">
        <sigta:stat variant="inline" tone="inverse" value="42h 10m" label="Logged this customer" />
        <sigta:stat variant="inline" tone="inverse" value="29.750 kr." label="Billable value" />
    </sigta:panel>