# Block #16

{% 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%2Fd1jH2RJ0BNkqojSrqEI1%2Fblock16.png?alt=media\&token=8071c7f4-a718-4336-859e-82cbeeab94fc)

![](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

```html
<div class="swiper swiper-block--16 rui--swiper-arrows">
    <div class="swiper-wrapper">
        <!-- Start item -->
        <div class="swiper-slide rui-card-item">
            <div class="rui-card h-100" style="
    max-width: 100%;
">
                <div class="rui-card-body">
                    <h4 class="mb-3">Indigenous peoples Education Australia Queensland.</h4>
                    <a href="https://rosea.io">
                        <div class="rui-img--rounded-fluid"><img src="https://demo.rosea.io/baz/1/pluginfile.php/1/theme_baz/bazsettingsimgs/0/img-4.jpg?time=1635624685924" alt="img 4" width="400" height="225"></div>
                    </a>
                    <p class="rui-card-text mt-3">Auto-generated reports: Get accurate insights on your performance with auto-generated reports that help create successful campaigns.</p>
                    <ul class="rui-special-list rui-special-list--light">
                        <li>Personal asset watchlists</li>
                        <li>Curated market data feed</li>
                        <li class="list-icon-x">Sansheets plugin with pre-made templates</li>
                    </ul>
                    <a href="https://rosea.io" class="rui-card-btn-link mt-2">Learn more about the Smart Keyboard</a>
                </div>
            </div>
        </div>
        <!-- End item -->

        <!-- Start item -->
        <div class="swiper-slide rui-card-item">
            <div class="rui-card h-100">
                <div class="rui-card-body">
                    <span class="badge-xs badge-warning">Updated: October 11, 2011</span>
                    <h4 class="mt-2 mb-3">Aboriginal Australians Study and teaching Australia Queensland.</h4>
                    <a href="https://rosea.io">
                        <div class="rui-img--rounded-fluid"><img src="https://demo.rosea.io/baz/1/pluginfile.php/1/theme_baz/bazsettingsimgs/0/img-5.jpg" alt="img 5" width="400" height="225"></div>
                    </a>
                    <p class="rui-card-text mt-3">Auto-generated reports: Get accurate insights on your performance with auto-generated reports that help create successful campaigns.</p>
                    <ul class="rui-special-list rui-special-list--primary">
                        <li>Personal asset watchlists</li>
                        <li>Curated market data feed</li>
                        <li class="list-icon-x">Sansheets plugin with pre-made templates</li>
                    </ul>
                    <a href="https://rosea.io" class="rui-card-btn-link mt-2">Learn more about the Smart Keyboard</a>
                </div>
            </div>
        </div>
        <!-- End item -->

        <!-- Start item -->
        <div class="swiper-slide rui-card-item">
            <div class="rui-card h-100">
                <div class="rui-card-body">
                    <span class="badge-xs badge-info">New</span>
                    <h4 class="mt-2 mb-3">Curriculum-based assessment Aids and devices.</h4>
                    <a href="https://rosea.io">
                        <div class="rui-img--rounded-fluid"><img src="https://demo.rosea.io/baz/1/pluginfile.php/1/theme_baz/bazsettingsimgs/0/img-6.jpg" alt="img 6" width="400" height="225"></div>
                    </a>
                    <p class="rui-card-text mt-3">Auto-generated reports: Get accurate insights on your performance with auto-generated reports that help create successful campaigns.</p>
                    <ul class="rui-special-list rui-special-list--light">
                        <li>Personal asset watchlists</li>
                        <li>Curated market data feed</li>
                        <li class="list-icon-x">Sansheets plugin with pre-made templates</li>
                    </ul>
                    <a href="https://rosea.io" class="rui-card-btn-link mt-2">Learn more about the Smart Keyboard</a>
                </div>
            </div>
        </div>
        <!-- End item -->

        <!-- Start item -->
        <div class="swiper-slide rui-card-item">
            <div class="rui-card h-100">
                <div class="rui-card-body">
                    <h4 class="mb-3">Indigenous peoples Education Australia Queensland.</h4>
                    <a href="https://rosea.io">
                        <div class="rui-img--rounded-fluid"><img src="https://demo.rosea.io/baz/1/pluginfile.php/1/theme_baz/bazsettingsimgs/0/img-4.jpg?time=1635624685924" alt="img 4" width="400" height="225"></div>
                    </a>
                    <p class="rui-card-text mt-3">Auto-generated reports: Get accurate insights on your performance with auto-generated reports that help create successful campaigns.</p>
                    <ul class="rui-special-list rui-special-list--light">
                        <li>Personal asset watchlists</li>
                        <li>Curated market data feed</li>
                        <li class="list-icon-x">Sansheets plugin with pre-made templates</li>
                    </ul>
                    <a href="https://rosea.io" class="rui-card-btn-link mt-2">Learn more about the Smart Keyboard</a>
                </div>
            </div>
        </div>
        <!-- End item -->

        <!-- Start item -->
        <div class="swiper-slide rui-card-item">
            <div class="rui-card h-100">
                <div class="rui-card-body">
                    <h4 class="mb-3">Indigenous peoples Education Australia Queensland.</h4>
                    <a href="https://rosea.io">
                        <div class="rui-img--rounded-fluid"><img src="https://demo.rosea.io/baz/1/pluginfile.php/1/theme_baz/bazsettingsimgs/0/img-4.jpg?time=1635624685924" alt="img 4" width="400" height="225"></div>
                    </a>
                    <p class="rui-card-text mt-3">Auto-generated reports: Get accurate insights on your performance with auto-generated reports that help create successful campaigns.</p>
                    <ul class="rui-special-list rui-special-list--light">
                        <li>Personal asset watchlists</li>
                        <li>Curated market data feed</li>
                        <li class="list-icon-x">Sansheets plugin with pre-made templates</li>
                    </ul>
                    <a href="https://rosea.io" class="rui-card-btn-link mt-2">Learn more about the Smart Keyboard</a>
                </div>
            </div>
        </div>
        <!-- End item -->

        <!-- Start item -->
        <div class="swiper-slide rui-card-item">
            <div class="rui-card h-100">
                <div class="rui-card-body">
                    <h4 class="mb-3">Indigenous peoples Education Australia Queensland.</h4>
                    <a href="https://rosea.io">
                        <div class="rui-img--rounded-fluid"><img src="https://demo.rosea.io/baz/1/pluginfile.php/1/theme_baz/bazsettingsimgs/0/img-4.jpg?time=1635624685924" alt="img 4" width="400" height="225"></div>
                    </a>
                    <p class="rui-card-text mt-3">Auto-generated reports: Get accurate insights on your performance with auto-generated reports that help create successful campaigns.</p>
                    <ul class="rui-special-list rui-special-list--light">
                        <li>Personal asset watchlists</li>
                        <li>Curated market data feed</li>
                        <li class="list-icon-x">Sansheets plugin with pre-made templates</li>
                    </ul>
                    <a href="https://rosea.io" class="rui-card-btn-link mt-2">Learn more about the Smart Keyboard</a>
                </div>
            </div>
        </div>
        <!-- End item -->

        <!-- Start item -->
        <div class="swiper-slide rui-card-item">
            <div class="rui-card h-100">
                <div class="rui-card-body">
                    <h4 class="mb-3">Indigenous peoples Education Australia Queensland.</h4>
                    <a href="https://rosea.io">
                        <div class="rui-img--rounded-fluid"><img src="https://demo.rosea.io/baz/1/pluginfile.php/1/theme_baz/bazsettingsimgs/0/img-4.jpg?time=1635624685924" alt="img 4" width="400" height="225"></div>
                    </a>
                    <p class="rui-card-text mt-3">Auto-generated reports: Get accurate insights on your performance with auto-generated reports that help create successful campaigns.</p>
                    <ul class="rui-special-list rui-special-list--light">
                        <li>Personal asset watchlists</li>
                        <li>Curated market data feed</li>
                        <li class="list-icon-x">Sansheets plugin with pre-made templates</li>
                    </ul>
                    <a href="https://rosea.io" class="rui-card-btn-link mt-2">Learn more about the Smart Keyboard</a>
                </div>
            </div>
        </div>
        <!-- End item -->

    </div> <!-- swiper-wrapper -->

    <div class="d-none d-md-flex swiper-button-next"></div>
    <div class="d-none d-md-flex swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
</div>
```

{% content-ref url="how-to-add-more-item-to-blocks" %}
[how-to-add-more-item-to-blocks](https://rosea.gitbook.io/baztheme/theme-settings/front-page-blocks/how-to-add-more-item-to-blocks)
{% endcontent-ref %}

![](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)

### Footer Content (Script)

```html
<script>
      var swiper16 = new Swiper(".swiper-block--16", {
        slidesPerView: 3,
        spaceBetween: 30,
        centeredSlides: true,
        navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            keyboard: {
                enabled: true,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        // Responsive breakpoints
            breakpoints: {
                // when window width is >= 320px
                320: {
                    slidesPerView: 1,
                },
                // when window width is >= 768px
                768: {
                    slidesPerView: 2,
                },
                // when window width is >= 1000px
                1100: {
                    slidesPerView: 3,
                }
            },
      });
    </script>
```