Pajamas ViewComponents
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class='gl-single-stat gl-flex gl-flex-col gl-p-2'>
  <div class='gl-flex gl-items-center gl-text-gray-700 gl-mb-2'>
    <svg class="s16 gl-mr-2" data-testid="chart-icon"><use href="/assets/icons-be8ca3b37e0f9a5adb0ee8b20a3ae0e568a9b5ac85539f8eaa965b6f7b4b38a1.svg#chart"></use></svg>
    <span class='gl-text-base gl-font-normal' data-testid='title-text'>
      Single stat
    </span>
  </div>
  <div class='gl-single-stat-content gl-flex gl-items-baseline gl-font-bold gl-text-gray-900'>
    <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>
1
2
3
4
5
6
7
8
9
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
)

SingleStat

See its design reference here.

Param Description Input

—

—

—

—

—

—

—