# Grid Content #5

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

<figure><img src="https://1467436830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzE3nwrT9Zh3l0SGFdHp9%2Fuploads%2F26NJiT8DVPsGugQLC9ND%2Fblock-5-moodle-theme.png?alt=media&#x26;token=e3ce3156-90cf-4af7-ab47-df81746e90a6" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

```html
<!-- Start - Block - Grid Content #5 -->
<div class="wrapper-fw">
    <!-- Start item -->
    <div class="row no-gutters mb-5 rui-card--colorized rui-rounded--lg" style="background-color: #ffddd7;">
        <div class="col-xs-12 col-lg-6 rui-img-rounded--lg pl-0 pr-lg-6">
            <img src="https://roseathemes.com/space/1/draftfile.php/5/user/draft/910155598/block-8-img-1.jpg" alt="pic #1" width="800" height="600" class="img-fluid atto_image_button_text-bottom">
        </div>
        <div class="col-xs-12 col-lg-6 d-flex flex-wrap align-content-center px-lg-6 mt-3 mt-lg-0">
            <div>
                <h3 class="lead-3">Engaging live sessions.</h3>
                <p>Lorem ipsum was purposefully designed to have no meaning, but appear like real text, making it the perfect placeholder.</p>
                <a href="#" class="btn btn-dark mt-3" target="_blank">Learn more</a>
            </div>
        </div>
    </div>
    <!-- End item -->

    <!-- Start item -->
    <div class="row no-gutters mb-5 rui-card--colorized rui-rounded--lg" style="background-color: #feedba;">
        <div class="col-xs-12 col-lg-6 d-flex flex-wrap align-content-center px-lg-6">
            <div>
                <h3 class="lead-3">Well-documented Moodle Theme</h3>
                <p>According to McClintock, a 15th century typesetter likely scrambled part of Ciceros De Finibus in order to provide placeholder text.</p>
                <a href="https://app.gitbook.com/s/AEb2xvTC9MyvJ5piB0eJ/getting-started/front-page-blocks/block-17-team" class="btn btn-dark mt-3" target="_blank">Check the documentation</a>
            </div>
        </div>

        <div class="col-xs-12 col-lg-6 rui-img-rounded--lg pr-0 pl-lg-6 mt-3 mt-lg-0">
            <img src="https://roseathemes.com/space/1/draftfile.php/5/user/draft/910155598/block-8-img-2.jpg" alt="pic #2" width="800" height="600" class="img-fluid atto_image_button_text-bottom">
        </div>
    </div>
    <!-- End item -->

    <!-- Start item -->
    <div class="row no-gutters mb-5 rui-card--colorized rui-rounded--lg" style="background-color: #f0e1f3;">
        <div class="col-xs-12 col-lg-6 rui-img-rounded--lg pl-0 pr-lg-6">
            <img src="https://roseathemes.com/space/1/draftfile.php/5/user/draft/910155598/block-8-img-3.jpg" alt="pic #4" width="800" height="600" class="img-fluid atto_image_button_text-bottom">
        </div>
        <div class="col-xs-12 col-lg-6 d-flex flex-wrap align-content-center px-lg-6 mt-3 mt-lg-0">
            <div>
                <h3 class="lead-3">Lifetime updates!</h3>
                <p>And anyways, as Cecil Adams reasoned, “Do you really, think graphic arts supply houses were hiring classics scholars in the 1960s?” Perhaps.</p>
                <a href="#" class="btn btn-dark mt-3" target="_blank">Available courses</a>
            </div>
        </div>
    </div>
    <!-- End item -->
</div>
<!-- End - Block - Grid Content #5 -->
```

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