# 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="https://2934894637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbCvyqQFWjULWnGrw3L3Z%2Fuploads%2Ft2ofGiWsjU1WmUiV9Mfb%2Fcategories-list-block-moodle-theme.png?alt=media&#x26;token=4e2f535f-c1be-429d-83ac-540082e643f4" 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/>