# Grid Content #7

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

<figure><img src="https://content.gitbook.com/content/FXzbdpVhyxdIy0lIThMp/blobs/xAaD9juq3nNrRwnxVVzh/grid-content-6-moodle-theme.png" 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/scholastica-moodle-theme/theme-settings/front-page-blocks/how-to-add-more-item-to-blocks)
{% endcontent-ref %}