Component demo · A closing call-to-action designed to bridge page content and the footer.

Enhanced Pre-Footer CTA

Open demo ↗

A meaningful closing message

Bring the page to a strong finish.

Use this area for a final story, invitation, or next step before visitors reach the footer.

Primary action Learn more

HTML source & reuse instructions

Place the component immediately before your footer. The overlap is reduced automatically on smaller screens.

<section class="versa-prefooter versa-prefooter--overlap">
  <div class="versa-prefooter__inner">
    <div class="versa-prefooter__media"><img src="assets/images/example.svg" alt=""></div>
    <div class="versa-prefooter__panel">
      <span class="versa-site-eyebrow">A meaningful closing message</span>
      <h2>Bring the page to a strong finish.</h2>
      <p>Use this area for a final story, invitation, or next step before visitors reach the footer.</p>
      <div class="d-flex flex-wrap gap-3">
        <a class="btn btn-primary" href="#">Primary action</a>
        <a class="btn btn-outline-primary" href="#">Learn more</a>
      </div>
    </div>
  </div>
</section>