Links
Comment on page

Block #2

Custom Categories Block.
Tips:
  1. 1.
    How to hide any element for non-logged in users or show it only for logged in users? Learn more
  2. 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. 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?

Last modified 2yr ago