How does section content work?

What happens if we just want to write content inside our sections without worrying about keeping it centered or at the top or bottom of the section?

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 parallax section at the top, center or bottom. Awesome, right?

Imagine what you can do!

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 imagine-content component spans the whole section height. Inside of it, we have a imagine-content-container which has the same height as the content inside of it and gets positioned at the top, center or bottom.

<!-- Imagine -->
<div class="imagine">
  <!-- Content -->
  <div class="imagine-content imagine-content-center">
    <div class="imagine-content-container">
      <!-- Your HTML goes here -->
      <h2 class="text-white text-center">Imagine what you can do!</h2>
    </div>
  </div>

  <!-- Background -->
  <!-- To change the background, modify the src=".." attribute -->
  <img class="imagine-background" src="assets/img/background-2.jpg">
</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 imagine-content component requires one of the following extra classes to specify the content position:

• imagine-content-top
• imagine-content-center
• imagine-content-bottom

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

This is nice, but can I animate any HTML?

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