What is HTML Content?

HTML Content is a section inside your slide which allows you to use things such as your beloved responsive grid markup, text and buttons without worrying about positions and sizes.

Everything is positioned like it would be in the other parts of the page, and can be positioned on your slide at the top, center or bottom.

Welcome to slidea!

Welcome to slidea!

How do I markup HTML Content?

The HTML content markup works the following way: the slidea-content component spans the whole slider height. Inside of it, we have a slidea-content-container which has the same height as the content inside of it and gets positioned using CSS classes.

<!-- Slidea -->
<div class="slidea">
  <!-- First Slide -->
  <div class="slidea-slide">

    <!-- Content -->
    <div class="slidea-content slidea-content-top">
      <div class="slidea-content-container">
        <h2 class="text-white text-center">Welcome to slidea at the top!</h2>
      </div>
    </div>

    <img class="slidea-background" src="assets/img/slide-1.jpg">
  </div>

  <!-- Second Slide -->
  <div class="slidea-slide">

    <!-- Content -->
    <div class="slidea-content slidea-content-center">
      <div class="slidea-content-container">
        <h2 class="text-white text-center">Welcome to slidea centered!</h2>
      </div>
    </div>

    <img class="slidea-background" src="assets/img/slide-2.jpg">
  </div>

  <!-- Third Slide -->
  <div class="slidea-slide">

    <!-- Content -->
    <div class="slidea-content slidea-content-bottom">
      <div class="slidea-content-container">
        <h2 class="text-white text-center">Welcome to slidea at the bottom!</h2>
      </div>
    </div>

    <img class="slidea-background" src="assets/img/slide-3.jpg">
  </div>
</div>

Content positions

The slidea-content component requires one of the following extra classes to specify the content position:

• slidea-content-top
• slidea-content-center
• slidea-content-bottom

<div class="slidea-content slidea-content-center">
  <div class="slidea-content-container">
    <!-- Your HTML goes here -->
  </div>
</div>