> For the complete documentation index, see [llms.txt](https://rosea.gitbook.io/baztheme/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/baztheme/theme-settings/front-page-blocks/block-2.md).

# Block #2

{% hint style="info" %}
**Tips:**

1. How to **hide** any element for **non-logged** in **users** or show it only for **logged in** users? [Learn more](/baztheme/more/show-hide-for-non-logged-in-users.md)
2. **Title modifications** - [Learn more](/baztheme/global-styles/headings-text-modifications.md)
   {% endhint %}

### Available options

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

![](/files/bkqUuLhLMd0Yjjyl2yGR)

### Preview

![](/files/oms4VFXbruH7IBnzrNLJ)

![](/files/bkqUuLhLMd0Yjjyl2yGR)

### Badges

#### Badge "Soon"

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

![](/files/jJFLD6D5LVT54v6jmCCy)

#### Badge "NEW"

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

![](/files/HA9ElDIRDxevh50RgKnv)

![](/files/bkqUuLhLMd0Yjjyl2yGR)

### Code snippet

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

* Front page
* Course page
* Any sub pages

{% code title="Block #2" %}

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

{% endcode %}

![](/files/bkqUuLhLMd0Yjjyl2yGR)

### How to add new item?

1. Switch to "HTML view"

![](/files/o7FgkQFIrKjLPCN7rKq0)

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

![](/files/UjQDVqmXyfkaIyiX4utM)

![](/files/bkqUuLhLMd0Yjjyl2yGR)

### Icons

![Sample icon dimension: 80x80](/files/NnK2qSz02rdv342iQnd7)

#### Where I can find that awesome icons?

{% embed url="<https://iconic.app>" %}

{% embed url="<https://css.gg>" %}

{% embed url="<https://icons8.com>" %}