# 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](https://rosea.gitbook.io/baztheme/more/show-hide-for-non-logged-in-users)
2. **Title modifications** - [Learn more](https://rosea.gitbook.io/baztheme/global-styles/headings-text-modifications)
   {% endhint %}

### Available options

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

![](https://2873786088-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCsh2IXpGstOXBcIR0peN%2Fuploads%2FMP0YRkhhHFVGozLM3DUI%2Fsep.svg?alt=media\&token=c216c050-ce9c-453e-8960-154078e4e819)

### Preview

![](https://2873786088-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCsh2IXpGstOXBcIR0peN%2Fuploads%2Fj4gnnDGTrazVSIB9H206%2Fblock2.png?alt=media\&token=43476857-b81a-4f21-888f-fa1c6792b144)

![](https://2873786088-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCsh2IXpGstOXBcIR0peN%2Fuploads%2FMP0YRkhhHFVGozLM3DUI%2Fsep.svg?alt=media\&token=c216c050-ce9c-453e-8960-154078e4e819)

### Badges

#### Badge "Soon"

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

![](https://2873786088-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCsh2IXpGstOXBcIR0peN%2Fuploads%2FjurUjHNx1CP33iw9YIex%2Fbadge-soon.jpg?alt=media\&token=ca71400d-6540-4a3c-9651-dbc030cfe0a0)

#### Badge "NEW"

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

![](https://2873786088-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCsh2IXpGstOXBcIR0peN%2Fuploads%2F3JlRhwWVpOeq8ckjzq5W%2Fbadge-new.jpg?alt=media\&token=5e84de89-51f6-4885-a2cf-f19ef355b712)

![](https://2873786088-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCsh2IXpGstOXBcIR0peN%2Fuploads%2FMP0YRkhhHFVGozLM3DUI%2Fsep.svg?alt=media\&token=c216c050-ce9c-453e-8960-154078e4e819)

### 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 %}

![](https://2873786088-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCsh2IXpGstOXBcIR0peN%2Fuploads%2FMP0YRkhhHFVGozLM3DUI%2Fsep.svg?alt=media\&token=c216c050-ce9c-453e-8960-154078e4e819)

### How to add new item?

1. Switch to "HTML view"

![](https://2873786088-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCsh2IXpGstOXBcIR0peN%2Fuploads%2FIZyXqAGyx1yjit2gO2MD%2Fcodeview.gif?alt=media\&token=6925b37a-4a9e-4c2c-87dd-fda36ee68815)

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

![](https://2873786088-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCsh2IXpGstOXBcIR0peN%2Fuploads%2F4WYz6oekAnm7WNDbHk7B%2Fcopycode.gif?alt=media\&token=45874a7c-320c-45cd-bd3f-313625b9586a)

![](https://2873786088-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCsh2IXpGstOXBcIR0peN%2Fuploads%2FMP0YRkhhHFVGozLM3DUI%2Fsep.svg?alt=media\&token=c216c050-ce9c-453e-8960-154078e4e819)

### Icons

![Sample icon dimension: 80x80](https://2873786088-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCsh2IXpGstOXBcIR0peN%2Fuploads%2FH6YAHwER0ROBGY59fQEy%2Fsample-icon.jpg?alt=media\&token=f3f601c5-e30b-4254-953c-5b86c0609925)

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

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

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

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