---
description: 'Block Hero Image (Site administration - Appearance - Alpha -> Block #3)'
---

# Block #3

<figure><img src="https://2392718208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjCQEtIvsTA0eOyo5BCXE%2Fuploads%2FA0wcB2gOuKudoPVTsHNY%2Fhero-block3-moodle-theme-alpha.png?alt=media&#x26;token=f2efd45a-6e3b-4095-b766-fa6ba98bd285" alt=""><figcaption></figcaption></figure>

### Available options:

1. Full-width container (on/off)
2. Additional Class Name
3. **Content Wrapper Alignment:** _(Left, Middle, Right)_
4. **Heading Size:** _(Normal, Large, Extra Large)_\
   _Normal: 40px , Large: 60px , Extra large: 80px_
5. **Heading Color:** _White, Dark, Gradient_
6. **Heading Font Weight:** _Normal(400), Medium(500), Bold (700)_
7. Show Colorized Content Wrapper (on/off)
8. Content Wrapper Color
9. Heading
10. Caption
11. HTML Content

### Sample HTML Code Snippets

#### Version 1:

{% code overflow="wrap" lineNumbers="true" %}
```html
<div class="rui-hero-desc"><span class="badge badge-info mx-0 mb-3">Only for Moodle 4.0.</span>
    <p>From its medieval origins to the digital era, learn everything there is to know about the ubiquitous lorem ipsum passage.</p>
</div>
<div class="rui-hero-btns d-inline-flex flex-wrap">
    <a href="https://demo.rosea.io/alpha/1/login/index.php" class="btn btn-lg btn-primary">Sign up</a>
</div>
```
{% endcode %}

#### Version 2:

{% code overflow="wrap" lineNumbers="true" %}
```html
<div class="rui-hero-desc">
<p>The Alpha 2 is dedicated only to Moodle 4.0 and later. For Moodle 3.9 - 3.11 there is Alpha 1.15</p>
<p class="mt-3 small">Need help with theme customization?<br>Or do you want to report a bug?</p>
</div>
<div class="rui-hero-btns mt-3 2-100">
<a href="https://1.envato.market/3PgWgB" target="_blank" class="btn btn-lg btn-primary my-1">Get this theme!</a>
</div>
<div class="rui-hero-btns mt-3 w-100">
<a href="https://rosea.io/alpha-theme/" target="_blank" class="btn btn-sm btn-light my-1 mx-0">Alpha 1.15 for Moodle 3.9 - 3.11</a>
</div>
```
{% endcode %}
