# Content #2

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

<figure><img src="https://content.gitbook.com/content/FXzbdpVhyxdIy0lIThMp/blobs/AxMzJ2pR1W5zMpEx69k5/content-2-moodle-theme.png" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

```html
<div class="wrapper-md">
    <!-- Start item -->
    <div class="rui-card--colorized rui-rounded--lg" style="background-color: #e0e6f9;">
        <div class="d-flex flex-wrap align-content-center">
            <div>
                <h3 class="lead-1">Space for Moodle 4.x</h3>
                <p class="text-size-xl text-secondary">For those who need customization, template editing, project bug fixing, or simply a fast and affordable hand.</p>
            </div>

            <div class="d-flex flex-wrap mt-4 row-cols-md-2">
                <div>
                    <h4 class="text-primary">Pros</h4>
                    <ul class="rui-special-list rui-special-list--primary list-styled col">
                        <li>Compatible with Moodle 4.1 and 4.0</li>
                        <li>22+ Fully Customizable Blocks</li>
                        <li>Lifetime updates</li>
                        <li>Super friendly support</li>
                        <li>Translation Ready</li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-secondary">Cons</h4>
                    <ul class="rui-special-list rui-special-list--primary list-styled col">
                        <li class="list-icon-x">Compatibility with older Moodle versions</li>
                        <li class="list-icon-x">Free Custom Work</li>
                    </ul>
                </div>
            </div>
            <div class="my-4 w-100"><a href="https://rosea.gitbook.io/space-moodle-theme/" class="btn btn-lg btn-primary">Documentation</a>
            </div>
            <p class="text-size-sm">Learn more about customizing, pre-defined HTML blocks. <a href="https://rosea.gitbook.io/space-moodle-theme/theme-settings/front-page-blocks" target="_blank" class="underline--anim">Go to the documentation page</a></p>
        </div>
    </div>
    <!-- End item -->
</div>
```

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

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