# Grid Content #8

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

<figure><img src="https://1467436830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzE3nwrT9Zh3l0SGFdHp9%2Fuploads%2F0ooqD4XQiAKnWaQAO6lf%2Fgrid-content-8-moodle-theme.png?alt=media&#x26;token=50f73c1a-4e65-4f22-aeca-51bb286cfe75" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

```html
<!-- Start - Block - Grid Content #8 -->
<div class="row row-cols-1 row-cols-lg-2 mx-0 px-0">

    <!-- Start item -->
    <div class="rui-card-item col mb-4">
        <div class="rui-card--colorized rui-rounded--lg text-center" style="background-color: #ffddd7;">
            <div class="rui-card-body">

                <!-- icon -->
                <div class=" mb-3">
                    <svg width="90px" height="90px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor">
                        <path d="M12 21V7a2 2 0 012-2h7.4a.6.6 0 01.6.6v13.114M12 21V7a2 2 0 00-2-2H2.6a.6.6 0 00-.6.6v13.114M14 19h8M10 19H2" stroke="#000000" stroke-width="1.5" stroke-linecap="round"></path>
                        <path d="M12 21a2 2 0 012-2M12 21a2 2 0 00-2-2" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </div>
                <!-- end icon -->

                <h3 class="display-3">Get started</h3>
                <p class="text-size-lg mt-3">Check out the documentation page. Learn how to start and set up everything from scratch.</p>
                <a href="https://rosea.io" class="btn btn-lg btn-dark mt-4">Let's get started</a>
            </div>
        </div>
    </div>
    <!-- End item -->

    <!-- Start item -->
    <div class="rui-card-item col mb-4">
        <div class="rui-card--colorized rui-rounded--lg text-center" style="background-color: #feedba;">
            <div class="rui-card-body">

                <!-- icon -->
                <div class="mb-3">
                    <svg width="90px" height="90px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor">
                        <path d="M10 15v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4a2 2 0 012-2h4a2 2 0 012 2zM16 5v4a2 2 0 01-2 2h-4a2 2 0 01-2-2V5a2 2 0 012-2h4a2 2 0 012 2zM22 15v4a2 2 0 01-2 2h-4a2 2 0 01-2-2v-4a2 2 0 012-2h4a2 2 0 012 2zM6 16v-3M12 6V3M18 16v-3" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </div>
                <!-- end icon -->

                <h3 class="display-3">Blocks Snippets</h3>
                <p class="text-size-lg mt-3">Check the theme front page blocks snippets library. Check how easy and flexible they are.</p>
                <a href="https://rosea.gitbook.io/monocolor/getting-started/front-page-blocks" class="btn btn-lg btn-dark mt-4">Code snippets library</a>
            </div>
        </div>
    </div>
    <!-- End item -->

</div>
<!-- End - Block - Grid Content #8 -->
```

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

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