What is HTML Content?

HTML Content is a section inside your canvas 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 canvas at the top, center or bottom.

Welcome to imagine!

This text is a HTML content component

How do I markup HTML Content?

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

<!-- Imagine -->
<div class="imagine">
  <!-- Content -->
  <div class="imagine-content imagine-content-top">
    <div class="imagine-content-container">
      <!-- Your HTML goes here -->
      <h2 class="text-white text-center">Welcome to imagine at the top!</h2>
    </div>
  </div>

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

Content positions

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>