Documentation
Basic
Extended
Blocks

Block box

99 Published Pages 7 Unpublished Pages 3 Published Modules 5 Unpublished Modules 4 Module Settings 5 Categories 3 Unread Messages 

<div class="block-boxes">
    <a href="#" class="box block-box">
        <span class="block-box-hl">99</span>
        <i class="iconoir-multiple-pages block-box-icon"></i>
        <span class="block-box-title">Published Pages</span>
    </a>

    <a href="#" class="box block-box">
        <span class="block-box-hl">7</span>
        <i class="iconoir-page-minus block-box-icon"></i>
        <span class="block-box-title">Unpublished Pages</span>
    </a>

    <a href="#" class="box block-box">
        <span class="block-box-hl">3</span>
        <i class="iconoir-xray-view block-box-icon"></i>
        <span class="block-box-title">Published Modules</span>
    </a>

    <a href="#" class="box block-box">
        <span class="block-box-hl">5</span>
        <i class="iconoir-cube-dots block-box-icon"></i>
        <span class="block-box-title">Unpublished Modules</span>
    </a>

    <a href="#" class="box block-box">
        <span class="block-box-hl">4</span>
        <i class="iconoir-rubik-cube block-box-icon"></i>
        <span class="block-box-title">Module Settings</span>
    </a>

    <a href="#" class="box block-box">
        <span class="block-box-hl">5</span>
        <i class="iconoir-keyframes block-box-icon"></i>
        <span class="block-box-title">Categories</span>
    </a>

    <a href="#" class="box block-box">
        <span class="block-box-hl">3</span>
        <i class="iconoir-message block-box-icon"></i>
        <span class="block-box-title">Unread Messages</span>
    </a>
</div>
SASS reference
$block-box-size: rem(250) !default;

--r-block-box-spacing: var(--r-box-spacing);
--r-block-box-size: #{$block-box-size};
--r-block-box-color: var(--r-global-font-color);
--r-block-box-hover-color: var(--r-color-white);
--r-block-box-hover-background: var(--r-color-primary);
--r-block-box-icon-color: var(--r-color-dark-lighten-30);
--r-block-box-hl-color: var(--r-color-dark-lighten-30);