# Block #3 - Hero Image

<figure><img src="https://1517109349-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAEb2xvTC9MyvJ5piB0eJ%2Fuploads%2Fi1B4U8i0oRSLflEVMkS6%2Fblock3.jpg?alt=media&#x26;token=640452c0-6074-499e-b1d3-d15bf09f2074" alt=""><figcaption></figcaption></figure>

## Demo Settings

* Full-width container: **Off**
* Content Wrapper Alignment: **Left**
* Heading: **Works with Moodle 4.x**
  * Heading Size: **Normal**
  * Heading Color: **White**
  * Heading Weight: **Bold**
* Caption

  <pre class="language-html" data-overflow="wrap" data-line-numbers><code class="lang-html">&#x3C;div class="rui-hero-desc">An awesome theme dedicated to Moodle 4.0 and 4.1. Check how amazing it is.&#x3C;/div>
  &#x3C;div class="rui-hero-btns d-inline-flex flex-wrap">
      &#x3C;a href="https://demo.rosea.io/space/1/login/index.php" class="btn btn-lg btn-primary  hideforloggedin">Sign up&#x3C;/a>
      &#x3C;a href="https://demo.rosea.io/space/1/login/index.php" class="btn btn-lg btn-light">Get this theme&#x3C;/a>
  &#x3C;/div>
  </code></pre>

## Available options

* Full-width container *(Full width: 100%, Standard: max-width: 1200px )*
* [Additional Class Name *(For developers)*](https://rosea.gitbook.io/monocolor/demo-content/front-page-blocks/advanced-options/additional-classes)
* Content Wrapper Alignment *(Left, Middle, Right)*
* Block Intro Content *(HTML Content before the block)*
* Heading Size *(Normal, Large, Extra Large)*

  ```css
  Normal: 40px , Large: 60px , Extra Large: 80px
  ```
* Heading Color *(Black, White, Gradient)*

  ```php
  Gradient: $primary-color-200, $primary-color-600

  // CSS class
  .rui-text--gradient
  ```
* Heading Font Weight *(Normal, Medium, Bold)*
* Show Colorized Content Wrapper (On/Off)
  * Content Wrapper Color (HEX)