What is HTML Content?

We’ve learned about Image and HTML Layers. Layers use an absolute size and position, with width, height, top, bottom, left and right set explicitly. What happens if we just want to write content inside our slides without worrying about keeping it centered or at the top or bottom of the slide?

That’s where HTML Content comes in! HTML Content 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, but it’s on your slide at the top, center or bottom. Awesome, right?

Welcome to slidea!

Welcome to slidea!

How do I markup HTML Content?

Make sure you’ve followed the previous Getting Started articles before you continue.

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 at the top, center or bottom.

<!-- Slidea -->
<div class="slidea">
  <!-- First 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!</h2>
      </div>
    </div>

    <!-- Background -->
    <!-- To change the background, modify the src=".." attribute -->
    <img class="slidea-background" src="assets/img/slide-1.jpg">
  </div>

  <!-- Second 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!</h2>
      </div>
    </div>

    <!-- Background -->
    <!-- To change the background, modify the src=".." attribute -->
    <img class="slidea-background" src="assets/img/slide-2.jpg">
  </div>
</div>

Make sure you put everything inside a single content component. Multiple content components will overlap and might not work properly.

How do I change the position?

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>

This is nice, but can I animate the content?

Yes! And it’s really easy. Read the next guide to see how.