Block #1 - Hero Slider

Hero Slider #1

Script: Swiper. MIT Licensed, v7.0.8 released on October 4, 2021

Demo Settings

• Full-width container: Off

• Content Wrapper Alignment: Left

• Slider interval: 7000

• Slides: 3

Slide #1

Slide Heading: Meet a new Moodle Theme

Slide Caption: (Switch to the HTML/Code View)

HTML Code

<p class="text-size-xl">Get this amazing theme <a class="underline--anim">today.</a></p>
<p class="text-size-md">The Monocolor theme is fully compatible with the latest Moodle version.</p>
<p class="text-size-xs mt-3">Learn how to use this theme. Check out <a href="https://rosea.gitbook.io/monocolor/" class="underline--anim" target="_blank">extended documentation.</a></p>

More options

If you want to display or hide some elements for non-logged-in users use dedicated class names:
For non-logged-in users: hidefornotloggedin
For logged-in users: hideforloggedin

Slide Image:

• Size: 1200px x 600px

• Get the demo Image
• Credits Unsplash: https://unsplash.com/photos/Vc2dD4l57og

Slide #2

Slide Heading: Works with Moodle 4.x

Slide Caption: (Switch to the HTML/Code View)

HTML Code

<p class="text-size-lg">The Monocolor theme is fully compatible with the latest Moodle version.</p>
<p class="text-size-xs mt-3">Learn how to use this theme. Check out <a href="https://rosea.gitbook.io/monocolor/" class="underline--anim" target="_blank">extended documentation.</a></p>

More options

If you want to display or hide some elements for non-logged-in users use dedicated class names:
For non-logged-in users: hidefornotloggedin
For logged-in users: hideforloggedin

Slide Image:

• Size: 1200px x 600px

• Get the demo Image
• Credits Unsplash: https://unsplash.com/photos/Z4T5tts0wLM

Slide #3

Slide Heading: Just wow!

Slide Caption: (Switch to the HTML/Code View)

HTML Code

<p class="text-size-xl">Get this amazing theme <a class="underline--anim">today.</a></p>
<p class="text-size-md">The Monocolor theme is fully compatible with the latest Moodle version.</p>
<p class="text-size-xs mt-3">Learn how to use this theme. Check out <a href="https://rosea.gitbook.io/monocolor/" class="underline--anim" target="_blank">extended documentation.</a></p>

More options

If you want to display or hide some elements for non-logged-in users use dedicated class names:
For non-logged-in users: hidefornotloggedin
For logged-in users: hideforloggedin

Slide Image:

• Size: 1200px x 600px

• Get the demo Image
• Credits Unsplash: https://unsplash.com/photos/rReG42Hkqo4

Available options

• Full-width container (Full width: 100%, Standard: max-width: 1200px )

• Additional Class Name (For developers)
• Block Intro Content (HTML Content before the block)

• Content Wrapper Alignment (Left, Middle, Right)

• Heading Size (Normal, Large, Extra Large)

  Normal: 40px , Large: 60px , Extra Large: 80px

• Heading Color (Black, White, Gradient)

  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)

• Slider interval

• Slider Count (up to 7 slides)