Default :: Single Stat :: Pajamas ViewComponents

<div class='gl-single-stat gl-flex gl-flex-col gl-py-2'>
  <div class='gl-flex gl-items-center gl-text-subtle gl-mb-4'>
    <svg class="s16 gl-mr-2 gl-fill-icon-subtle" data-testid="chart-icon"><use href="/assets/icons-be8ca3b37e0f9a5adb0ee8b20a3ae0e568a9b5ac85539f8eaa965b6f7b4b38a1.svg#chart"></use></svg>
    <span class='gl-text-base gl-font-normal gl-text-subtle' data-testid='title-text'>
      Single stat
    </span>
  </div>
  <div class='gl-single-stat-content gl-flex gl-items-baseline gl-font-bold gl-text-default gl-mb-4'>
    <span class='gl-single-stat-number gl-leading-1' data-testid='displayValue'>
      <span data-testid='non-animated-value'>
        9,001
      </span>
    </span>
    <span class='gl-text-sm gl-mx-2 gl-transition-all gl-opacity-10' data-testid='unit'>
    </span>
    <span class='gl-badge badge badge-pill badge-muted' data-testid='meta-badge'><svg class="s16 gl-icon gl-badge-icon" data-testid="check-circle-icon"><use href="/assets/icons-be8ca3b37e0f9a5adb0ee8b20a3ae0e568a9b5ac85539f8eaa965b6f7b4b38a1.svg#check-circle"></use></svg></span>
  </div>
</div>

render Pajamas::SingleStatComponent.new(
  title: title,
  stat_value: stat_value,
  unit: unit,
  title_icon: title_icon,
  meta_text: meta_text,
  meta_icon: meta_icon,
  variant: variant
)

Param	Description	Input
Title	—
Stat Value	—
Unit	—
Title Icon	—
Meta Text	—
Meta Icon	—
Variant	—

No matching results.

No matching results.

SingleStat

Embed Code

Embed URL

Previews

No matching results.

Pages

No matching results.

SingleStat