Block #2

Custom Categories Block.

Tips:

How to hide any element for non-logged in users or show it only for logged in users? Learn more
Title modifications - Learn more

Available options

Turn on
Show Block Separator (hr)
Additional Class Name (only for developers)
Intro Title
Intro Content
HTML Content
Footer Content

Preview

Badges

Badge "Soon"

<span class="badge-sm badge-soon">Soon</span>

Badge "NEW"

<span class="badge-sm badge-new">New</span>

Code snippet

You can use this code everywhere on your moodle website e.g:

Front page
Course page
Any sub pages

Block #2

<div class="rui-card-cat-grid mx-0">
    <!-- Start item -->
    <a href="https://demo.rosea.io/baz/1/course/" class="rui-block-category-item">
        <div class="badge-wrapper w-100"><span class="badge-sm badge-soon">-50%</span></div>
        <div class="d-block"><img src="//demo.rosea.io/baz/1/pluginfile.php/1/theme_baz/bazsettingsimgs/0/icon1.png" alt="Icon #1" width="80" height="80" class="img-fluid atto_image_button_text-bottom"></div>
        <h3 class="rui-block-category-item-title">Art History</h3>
        <span class="rui-block-category-item-subtitle">3 courses</span>
    </a>
    <!-- End item -->

    <!-- Start item -->
    <a href="https://demo.rosea.io/baz/1/course/" class="rui-block-category-item">
        <div class="badge-wrapper w-100"><span class="badge-sm badge-soon">Soon</span></div>
        <div class="d-block"><img src="https://demo.rosea.io/baz/1/pluginfile.php/1/theme_baz/bazsettingsimgs/0/icon2.png" alt="Icon #2
" width="80" height="80" class="img-fluid atto_image_button_text-bottom"></div>
        <h3 class="rui-block-category-item-title">UI &amp; UX</h3>
        <span class="rui-block-category-item-subtitle">16 courses</span>
    </a>
    <!-- End item -->

    <!-- Start item -->
    <a href="https://demo.rosea.io/baz/1/course/" class="rui-block-category-item">
        <div class="d-block"><img src="https://demo.rosea.io/baz/1/pluginfile.php/1/theme_baz/bazsettingsimgs/0/icon3.png" alt="Icon #3" width="80" height="80" class="img-fluid atto_image_button_text-bottom"></div>
        <h3 class="rui-block-category-item-title">3D Design</h3>
        <span class="rui-block-category-item-subtitle">4 courses</span>
    </a>
    <!-- End item -->

    <!-- Start item -->
    <a href="https://demo.rosea.io/baz/1/course/" class="rui-block-category-item">
        <div class="d-block"><img src="https://demo.rosea.io/baz/1/pluginfile.php/1/theme_baz/bazsettingsimgs/0/icon4.png" alt="Icon #4" width="80" height="80" class="img-fluid atto_image_button_text-bottom"></div>
        <h3 class="rui-block-category-item-title">Media &amp; PR</h3>
        <span class="rui-block-category-item-subtitle">9 courses</span>
    </a>
    <!-- End item -->

    <!-- Start item -->
    <a href="https://demo.rosea.io/baz/1/course/" class="rui-block-category-item">
        <div class="badge-wrapper w-100"><span class="badge-sm badge-new">New</span></div>
        <div class="d-block"><img src="https://demo.rosea.io/baz/1/pluginfile.php/1/theme_baz/bazsettingsimgs/0/icon5.png" alt="Icon #5" width="80" height="80" class="img-fluid atto_image_button_text-bottom"></div>
        <h3 class="rui-block-category-item-title">Programming</h3>
        <span class="rui-block-category-item-subtitle">2 courses</span>
    </a>
    <!-- End item -->

    <!-- Start item -->
    <a href="https://demo.rosea.io/baz/1/course/" class="rui-block-category-item">
        <div class="d-block"><img src="https://demo.rosea.io/baz/1/pluginfile.php/1/theme_baz/bazsettingsimgs/0/icon6.png" alt="Icon #6" width="80" height="80" class="img-fluid atto_image_button_text-bottom"></div>
        <h3 class="rui-block-category-item-title">Music</h3>
        <span class="rui-block-category-item-subtitle">6 courses</span>
    </a>
    <!-- End item -->

    <!-- Start item -->
    <a href="https://demo.rosea.io/baz/1/course/" class="rui-block-category-item">
        <div class="d-block"><img src="https://demo.rosea.io/baz/1/pluginfile.php/1/theme_baz/bazsettingsimgs/0/icon8.png" alt="Icon #7" width="80" height="80" class="img-fluid atto_image_button_text-bottom"></div>
        <h3 class="rui-block-category-item-title">Language courses</h3>
        <span class="rui-block-category-item-subtitle">3 courses</span>
    </a>
    <!-- End item -->

</div>