Documentation
Basic
Extended
Blocks

Block stat

Unique Visitors
100k
1%
Page Views
1M
5%
Bounce Rate
40%
0%
Total Visits
400k
4%
Visit Duration
1m 30s
2%


<div class="block-stat">
    <div class="block-stat-item active">
        <div class="block-stat-label">Unique Visitors</div>
        <div class="block-stat-value">100k</div>
        <div class="block-stat-indicator"><span class="indicator is-downward">1%</span></div>
    </div>

    <div class="block-stat-item">
        <div class="block-stat-label">Page Views</div>
        <div class="block-stat-value">1M</div>
        <div class="block-stat-indicator"><span class="indicator is-upward">5%</span></div>
    </div>

    <div class="block-stat-item">
        <div class="block-stat-label">Bounce Rate</div>
        <div class="block-stat-value">40%</div>
        <div class="block-stat-indicator"><span class="indicator">0%</span></div>
    </div>

    <div class="block-stat-item">
        <div class="block-stat-label">Total Visits</div>
        <div class="block-stat-value">400k</div>
        <div class="block-stat-indicator"><span class="indicator is-upward">4%</span></div>
    </div>

    <div class="block-stat-item">
        <div class="block-stat-label">Visit Duration</div>
        <div class="block-stat-value">1m 30s</div>
        <div class="block-stat-indicator"><span class="indicator is-downward">2%</span></div>
    </div>
</div>
SASS reference
$block-stat-item-gap: rem(20) !default;

--r-block-stat-item-gap: #{$block-stat-item-gap};
--r-block-stat-item-background-color: transparent;
--r-block-stat-item-hover-background-color: var(--r-color-light);
--r-block-stat-item-border-radius: var(--r-global-border-radius);