Calls to action and footers

The end of the page: one last push, a newsletter signup, and the footer.

Call-to-action band Newsletter band Simple footer Footer with columns

Call-to-action band

sections/cta-footers/cta-band.html

A coloured panel with a headline and two buttons. Goes right before the footer.

<section class="mx-auto max-w-6xl px-6 py-16">
  <div class="rounded-3xl bg-brand-500 px-6 py-14 text-center shadow-lg sm:px-12 sm:py-16">
    <h2 class="mt-0! mb-0! border-t-0! pt-0! text-3xl! font-bold! leading-tight! tracking-tight text-white! sm:text-4xl!">Ready to check availability?</h2>
    <p class="mx-auto! mt-4! mb-0! max-w-xl text-lg leading-relaxed! text-white/85!">Send us your dates and the number of guests. We usually reply within a day.</p>
    <div class="mx-auto mt-8 flex max-w-xs flex-col gap-3 sm:max-w-none sm:flex-row sm:justify-center">
      <a href="#" class="inline-flex items-center justify-center rounded-md bg-white px-5 py-3 text-sm font-semibold text-brand-600! no-underline! shadow-sm hover:bg-white/90">Check availability</a>
      <a href="#" class="inline-flex items-center justify-center rounded-md px-5 py-3 text-sm font-semibold text-white! no-underline! ring-1 ring-white/50 ring-inset hover:bg-white/10">See the rooms</a>
    </div>
  </div>
</section>

Newsletter band

sections/cta-footers/newsletter.html

An email field and a button, side by side on a desktop and stacked on a phone.

Replace __YOUR_FORM_ID__ with your own form ID. Keep the hidden _honeypot input.

<section class="mx-auto max-w-6xl px-6 py-16">
  <div class="grid items-center gap-8 rounded-3xl bg-black/[0.03] px-6 py-10 sm:px-10 lg:grid-cols-2 dark:bg-white/5">
    <div>
      <h2 class="mt-0! mb-0! border-t-0! pt-0! text-2xl! font-bold! leading-tight! tracking-tight sm:text-3xl!">One email a month, worth opening</h2>
      <p class="mt-3! mb-0! leading-relaxed! text-black/70 dark:text-white/70">What to plant, what to prune, and what we got wrong. Unsubscribe with one click.</p>
    </div>
    <form action="https://f.bootform.com/__YOUR_FORM_ID__" method="POST" class="flex flex-col gap-3 sm:flex-row">
      <label for="newsletter-email" class="sr-only">Email address</label>
      <input id="newsletter-email" name="email" type="email" required autocomplete="email" placeholder="you@example.com" class="min-w-0 flex-1 rounded-md border border-black/20! bg-white! px-4! py-3! text-base outline-none focus:border-brand-500! focus:ring-2 focus:ring-brand-500/25 dark:border-white/20! dark:bg-white/5!">
      <input type="text" name="_honeypot" tabindex="-1" autocomplete="off" class="hidden" aria-hidden="true">
      <button type="submit" class="shrink-0 rounded-md bg-brand-500! px-5! py-3! text-sm font-semibold text-white hover:bg-brand-600!">Subscribe</button>
    </form>
  </div>
</section>

Simple footer

sections/cta-footers/footer-simple.html

Your name, a few links and a copyright line. Enough for most small sites.

<footer class="border-t border-black/10 dark:border-white/10">
  <div class="mx-auto flex max-w-6xl flex-col items-center gap-6 px-6 py-10 sm:flex-row sm:justify-between">
    <a href="#" class="flex items-center gap-2 font-bold tracking-tight text-black! no-underline! dark:text-white!"><svg class="size-6 text-brand-500" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2c4 4 6 7.5 6 11a6 6 0 0 1-12 0c0-3.5 2-7 6-11z"/></svg>Cedar &amp; Vine</a>
    <nav aria-label="Footer" class="flex flex-wrap justify-center gap-x-6 gap-y-2 text-sm">
      <a href="#" class="text-black/70! no-underline! hover:text-black! dark:text-white/70! dark:hover:text-white!">Services</a>
      <a href="#" class="text-black/70! no-underline! hover:text-black! dark:text-white/70! dark:hover:text-white!">Pricing</a>
      <a href="#" class="text-black/70! no-underline! hover:text-black! dark:text-white/70! dark:hover:text-white!">Blog</a>
      <a href="#" class="text-black/70! no-underline! hover:text-black! dark:text-white/70! dark:hover:text-white!">Contact</a>
    </nav>
    <p class="my-0! text-sm text-black/50 dark:text-white/50">&copy; 2026 Cedar &amp; Vine</p>
  </div>
</footer>

Footer with columns

sections/cta-footers/footer-columns.html

A short blurb plus three columns of links. Two columns on a phone.

On a VitePress site built from a BootForm template, the footer comes from docs/.vitepress/theme/index.ts, not from a page. Put the footer there, or leave the template's own one alone.

<footer class="border-t border-black/10 dark:border-white/10">
  <div class="mx-auto grid max-w-6xl gap-10 px-6 py-14 lg:grid-cols-5">
    <div class="lg:col-span-2">
      <a href="#" class="flex items-center gap-2 font-bold tracking-tight text-black! no-underline! dark:text-white!"><svg class="size-6 text-brand-500" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2c4 4 6 7.5 6 11a6 6 0 0 1-12 0c0-3.5 2-7 6-11z"/></svg>Cedar &amp; Vine</a>
      <p class="mt-4! mb-0! max-w-xs text-sm leading-relaxed! text-black/60 dark:text-white/60">Garden design and care for homes nearby, since 2014.</p>
    </div>
    <div class="grid grid-cols-2 gap-8 sm:grid-cols-3 lg:col-span-3">
      <div>
        <p class="my-0! text-sm font-semibold">Services</p>
        <ul class="mt-4! mb-0! flex list-none! flex-col gap-3 pl-0! text-sm">
          <li class="mt-0!"><a href="#" class="text-black/60! no-underline! hover:text-black! dark:text-white/60! dark:hover:text-white!">Lawn care</a></li>
          <li class="mt-0!"><a href="#" class="text-black/60! no-underline! hover:text-black! dark:text-white/60! dark:hover:text-white!">Garden design</a></li>
          <li class="mt-0!"><a href="#" class="text-black/60! no-underline! hover:text-black! dark:text-white/60! dark:hover:text-white!">Seasonal cleanup</a></li>
        </ul>
      </div>
      <div>
        <p class="my-0! text-sm font-semibold">Company</p>
        <ul class="mt-4! mb-0! flex list-none! flex-col gap-3 pl-0! text-sm">
          <li class="mt-0!"><a href="#" class="text-black/60! no-underline! hover:text-black! dark:text-white/60! dark:hover:text-white!">About</a></li>
          <li class="mt-0!"><a href="#" class="text-black/60! no-underline! hover:text-black! dark:text-white/60! dark:hover:text-white!">Blog</a></li>
          <li class="mt-0!"><a href="#" class="text-black/60! no-underline! hover:text-black! dark:text-white/60! dark:hover:text-white!">Contact</a></li>
        </ul>
      </div>
      <div>
        <p class="my-0! text-sm font-semibold">Follow</p>
        <ul class="mt-4! mb-0! flex list-none! flex-col gap-3 pl-0! text-sm">
          <li class="mt-0!"><a href="#" class="text-black/60! no-underline! hover:text-black! dark:text-white/60! dark:hover:text-white!">Instagram</a></li>
          <li class="mt-0!"><a href="#" class="text-black/60! no-underline! hover:text-black! dark:text-white/60! dark:hover:text-white!">Facebook</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="border-t border-black/10 dark:border-white/10">
    <p class="mx-auto! my-0! max-w-6xl px-6 py-6 text-sm text-black/50 dark:text-white/50">&copy; 2026 Cedar &amp; Vine. All rights reserved.</p>
  </div>
</footer>