Categories List #1

Site administration -> Appearance -> Space -> Block #

You can use any HTML block area to use a preset. You can even add an HTML preset anywhere on the page. There are fully customizable and reusable.

Preview

HTML Code

<div class="rui-card-cat-grid">
    <!-- Start item -->
    <a href="https://roseathemes.com/monocolor/1/course/index.php?categoryid=1" class="rui-block-category-item">
        <div class="rui-icon-box rui-icon-box--gray"><img src="https://roseathemes.com/monocolor/1/pluginfile.php/1/theme_monocolor/monocolorsettingsimgs/0/book-stack.svg" alt="Icon #1" width="24" height="24" class="img-fluid atto_image_button_text-bottom"></div>
        <div class="ml-3">
            <h3 class="rui-block-category-item-title">History</h3>
            <span class="rui-block-category-item-subtitle">3 courses</span>
        </div>
    </a>
    <!-- End item -->

    <!-- Start item -->
    <a href="https://roseathemes.com/monocolor/1/course/index.php?categoryid=1" class="rui-block-category-item">
        <div class="rui-icon-box rui-icon-box--gray"><img src="https://roseathemes.com/monocolor/1/pluginfile.php/1/theme_monocolor/monocolorsettingsimgs/0/leaderboard.svg" alt="Icon #2
      " width="24" height="24" class="img-fluid atto_image_button_text-bottom"></div>
        <div class="ml-3">
            <h3 class="rui-block-category-item-title">Statistics</h3>
            <span class="rui-block-category-item-subtitle">16 courses</span>
        </div>
    </a>
    <!-- End item -->

    <!-- Start item -->
    <a href="https://roseathemes.com/monocolor/1/course/index.php?categoryid=1" class="rui-block-category-item">
        <div class="rui-icon-box rui-icon-box--gray"><img src="https://roseathemes.com/monocolor/1/pluginfile.php/1/theme_monocolor/monocolorsettingsimgs/0/sigma-function.svg" alt="Icon #3" width="24" height="24" class="img-fluid atto_image_button_text-bottom"></div>
        <div class="ml-3">
            <h3 class="rui-block-category-item-title">Math</h3>
            <span class="rui-block-category-item-subtitle">4 courses</span>
        </div>
    </a>
    <!-- End item -->

    <!-- Start item -->
    <a href="https://roseathemes.com/monocolor/1/course/index.php?categoryid=1" class="rui-block-category-item">
        <div class="rui-icon-box rui-icon-box--gray"><img src="https://roseathemes.com/monocolor/1/pluginfile.php/1/theme_monocolor/monocolorsettingsimgs/0/3d-add-hole.svg" alt="Icon #4" width="24" height="24" class="img-fluid atto_image_button_text-bottom"></div>
        <div class="ml-3">
            <h3 class="rui-block-category-item-title">Geometry</h3>
            <span class="rui-block-category-item-subtitle">9 courses</span>
        </div>
    </a>
    <!-- End item -->

    <!-- Start item -->
    <a href="https://roseathemes.com/monocolor/1/course/index.php?categoryid=1" class="rui-block-category-item">
        <div class="rui-icon-box rui-icon-box--gray"><img src="https://roseathemes.com/monocolor/1/pluginfile.php/1/theme_monocolor/monocolorsettingsimgs/0/code-brackets-square.svg" alt="Icon #5" width="24" height="24" class="img-fluid atto_image_button_text-bottom"></div>
        <div class="ml-3">
            <h3 class="rui-block-category-item-title">Programming</h3>
            <span class="rui-block-category-item-subtitle">2 courses</span>
        </div>
    </a>
    <!-- End item -->

</div>

Icons

https://iconoir.com/