> For the complete documentation index, see [llms.txt](https://rosea.gitbook.io/moon-iomad-moodle-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://rosea.gitbook.io/moon-iomad-moodle-theme/theme-settings/front-page-blocks/categories-and-icons-list/categories-list-1.md).

# Categories List #1

{% hint style="info" %}
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.
{% endhint %}

{% tabs %}
{% tab title="Preview" %}

<figure><img src="/files/28egHGF0BBfcT02LbDi2" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="HTML Code" %}
{% code overflow="wrap" lineNumbers="true" %}

```html
<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>
```

{% endcode %}
{% endtab %}
{% endtabs %}

### Icons

<https://iconoir.com/>