three-column-footer

Summary

Dark three-column footer: brand block (logo, brand statement, social icons), nested two-column links (Company / Practice Areas, with check-bullets on the second), and a contact block with hours, location and email. A subfooter underneath holds the copyright and legal links.

HTML structure (minimal)

<footer class="section-dark">
  <div class="container">
    <div class="row gx-5">
      <div class="col-lg-4 col-sm-6">
        <img src="images/logo.webp" class="w-170px" alt="">
        <div class="spacer-20"></div>
        <p>We provide trusted legal representation...</p>
        <div class="social-icons mb-sm-30">
          <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
          <a href="#"><i class="fa-brands fa-x-twitter"></i></a>
          <a href="#"><i class="fa-brands fa-instagram"></i></a>
          <a href="#"><i class="fa-brands fa-youtube"></i></a>
          <a href="#"><i class="fa-brands fa-whatsapp"></i></a>
        </div>
      </div>
      <div class="col-lg-4 col-sm-12 order-lg-1 order-sm-2">
        <div class="row">
          <div class="col-lg-6 col-sm-6">
            <div class="widget">
              <h3 class="hs-4">Company</h3>
              <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="practice-areas-1.html">Practice Areas</a></li>
                <!-- ... -->
              </ul>
            </div>
          </div>
          <div class="col-lg-6 col-sm-6">
            <div class="widget">
              <h3 class="hs-4">Practice Area</h3>
              <ul class="ul-check id-color-2">
                <li><a href="practice-area-single.html">Personal Injury</a></li>
                <!-- ... -->
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-sm-6 order-lg-2 order-sm-1">
        <div class="widget">
          <div class="fw-bold text-white"><i class="icofont-clock-time me-2 id-color-2"></i>We're Open</div>
          Monday - Friday 08.00 - 18.00
          <div class="spacer-20"></div>
          <div class="fw-bold text-white"><i class="icofont-location-pin me-2 id-color-2"></i>Office Location</div>
          100 S Main St, New York, NY
          <div class="spacer-20"></div>
          <div class="fw-bold text-white"><i class="icofont-envelope me-2 id-color-2"></i>Send a Message</div>
          contact@regalis.com
        </div>
      </div>
    </div>
  </div>
  <div class="subfooter">
    <div class="container">
      <div class="de-flex">
        <div class="de-flex-col">Copyright 2026 - Regalis by Designesia</div>
        <ul class="list-inline">
          <li class="list-inline-item"><a href="#">Terms &amp; Conditions</a></li>
          <li class="list-inline-item"><a href="#">Privacy Policy</a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>

Key SCSS tokens

footer.section-dark {
  background: var(--bg-dark-1);                 /* #101010 */
  color: rgba(255,255,255,.6);
  padding: 80px 0 40px;
}
footer h3.hs-4 { color: #fff; margin-bottom: 1.5rem; }
.subfooter {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 1.5rem 0;
  margin-top: 2.5rem;
}
.de-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.spacer-20 { height: 20px; }
.list-inline-item a:hover { color: var(--secondary-color); }

Notable details

• Uses order-lg-1 / order-sm-2 to reorder columns differently on desktop vs. small screens — the contact block jumps to the right on desktop but appears second on mobile.
• The middle "links" column is itself a nested 2-column row, so the footer reads as 4 columns visually but stays in 3 outer columns for grid math.
• Social and contact icons share the same id-color-2 (gold) tinting — single CSS variable controls all accent color in the footer.

Use when

• Service-business footers that need a contact block prominent on desktop without sacrificing link density.
• Sites with two distinct link categories (company / services) plus an explicit "we're open" hours block.

Caveats

• The reordering pattern is fragile — a fourth column would require rethinking order-lg-* numbering across all three.
• subfooter typography is small; ensure copyright and legal links remain accessible on dark backgrounds.