Block #2

Custom Categories Block.

Tips:

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

2. 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>

How to add new item?

1. Switch to "HTML view"

2. Copy/paste code between <!-- Start item - - > <!-- End item - - >

Icons

Sample icon dimension: 80x80

Where I can find that awesome icons?

Iconic — Free “do wtf you want with” pixel-perfect iconsIconic — Free “do wtf you want with” pixel-perfect icons

700+ CSS Icons, Customizable, Retina Ready & APIcss.gg

Free Icons, Clipart Illustrations, Photos, and Music