# Grid Content #7

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

<figure><img src="https://1467436830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzE3nwrT9Zh3l0SGFdHp9%2Fuploads%2FHkNKwtGgWPveuuBNsF6E%2Fgrid-content-6-moodle-theme.png?alt=media&#x26;token=179710ae-b437-4b31-802c-f0bf71eab8b2" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

```html
<!-- Start - Block - Grid Content #7 -->
<div class="row align-items-lg-center text-sm-center text-md-left">
    <div class="col-12 col-lg">
        <h2 class="lead-2 mb-3">The best Moodle experience ever.</h2>
        <p class="pb-3 mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lectus nec
            nunc bibendum facilisis pellentesque ut eros. Praesent bibendum sed mi aliquet tempus.</p>

        <div class="d-flex flex-wrap justify-content-center justify-content-lmd-start">
            <a class="btn btn-lg btn-primary" href="#">Try a free lesson</a>
            <a class="btn btn-lg btn-outline-primary my-2 my-lmd-0 ml-lmd-2" href="#">Documentation</a>
        </div>
    </div>

    <div class="rui-img-rounded--xl col-12 col-lg-6 mt-3 mt-lg-0 offset-lg-1">
        <img src="https://roseathemes.com/space/1/draftfile.php/5/user/draft/910155598/600x-600.jpg?time=1675403600678" alt="Moodle Theme - Unsplash" width="600" height="600" class="w-100 img-fluid atto_image_button_text-bottom">
    </div>

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

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