Public Footer

Site footer for public guest pages with brand info, navigation links, social media, and legal links. Based on the canonical mockup design.

Brand Section Quick Links Social Media Legal Links Responsive

Live Preview

Complete footer with brand, navigation, properties, contact, and legal sections.

Full Footer

HTML Structure

Complete footer markup ready to copy and customize.

Footer Template 
<footer class="footer">
  <div class="footer-container">
    <!-- Footer Grid -->
    <div class="footer-grid">
      <!-- Brand -->
      <div class="footer-col">
        <div class="footer-brand">
          <span class="footer-brand-icon">🏡</span>
          <div class="footer-brand-info">
            <span class="footer-brand-name">AzylKampinos</span>
          </div>
        </div>
        <p class="footer-description">
          Experience nature's tranquility in our premium forest cabins and countryside retreats.
        </p>
        <div class="footer-social">
          <a href="#" class="footer-social-icon" title="Facebook">
            <svg fill="currentColor" viewBox="0 0 24 24">
              <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
            </svg>
          </a>
          <a href="#" class="footer-social-icon" title="Instagram">
            <svg fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" />
            </svg>
          </a>
        </div>
      </div>

      <!-- Quick Links -->
      <div class="footer-col">
        <h4 class="footer-title">Quick Links</h4>
        <ul class="footer-list">
          <li class="footer-list-item">
            <a href="#" class="footer-link">Home</a>
          </li>
          <li class="footer-list-item">
            <a href="#offers" class="footer-link">Our Offers</a>
          </li>
          <li class="footer-list-item">
            <a href="#" class="footer-link">About Us</a>
          </li>
          <li class="footer-list-item">
            <a href="#contact" class="footer-link">Contact</a>
          </li>
        </ul>
      </div>

      <!-- Properties -->
      <div class="footer-col">
        <h4 class="footer-title">Properties</h4>
        <ul class="footer-list">
          <li class="footer-list-item">
            <a href="#" class="footer-link">Forest Cabin "Dębowy"</a>
          </li>
          <li class="footer-list-item">
            <a href="#" class="footer-link">Lakeside Cottage "Sosnowy"</a>
          </li>
          <li class="footer-list-item">
            <a href="#" class="footer-link">Garden House "Brzozowy"</a>
          </li>
          <li class="footer-list-item">
            <a href="#offers" class="footer-link">All Properties</a>
          </li>
        </ul>
      </div>

      <!-- Contact -->
      <div class="footer-col">
        <h4 class="footer-title">Contact</h4>
        <ul class="footer-list">
          <li class="footer-list-item">
            <span>📍</span> Kampinos, Poland
          </li>
          <li class="footer-list-item">
            <span>📧</span>
            <a href="mailto:contact@example.com" class="footer-link">contact@example.com</a>
          </li>
          <li class="footer-list-item">
            <span>📞</span>
            <a href="tel:+48123456789" class="footer-link">+48 123 456 789</a>
          </li>
        </ul>
      </div>
    </div>

    <!-- Footer Bottom -->
    <div class="footer-bottom">
      <div class="footer-meta">
        <p class="footer-copyright">
          © 2026 AzylKampinos. All rights reserved.
        </p>
        <p class="footer-version">
          App version: v0.1.82 202601022400CET
        </p>
      </div>
      <div class="footer-legal-links">
        <a href="#" class="footer-legal-link">Privacy Policy</a>
        <a href="#" class="footer-legal-link">Terms of Service</a>
        <a href="#" class="footer-legal-link">Cookie Policy</a>
      </div>
    </div>
  </div>
</footer>

Usage Guidelines

Best practices for implementing the public footer.

✅ Do
  • Keep footer at the bottom of every public page
  • Replace placeholder text with actual content
  • Include all 4 columns on desktop, stack responsively on mobile
  • Use actual social media URLs
  • Populate "Properties" section dynamically
  • Update copyright year dynamically
  • Test footer in both light and dark modes
  • Include full SVG paths for social media icons
❌ Don't
  • Use inline styles for visual changes
  • Add custom link styles - use .footer-link
  • Override footer background - it's intentionally dark
  • Remove social icons if not provided (hide the section)
  • Link to non-existent pages - verify all URLs exist
  • Duplicate footer - should appear once per page
  • Forget to update placeholder email/phone numbers
  • Use outdated copyright year

Responsive Behavior

Footer adapts to different screen sizes:

Breakpoints 
/* Mobile (default): 1 column, stacked vertically */
.footer-grid {
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* Tablet (768px+): 2 columns */
@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop (1024px+): 4 columns */
@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
  }
}

/* Footer Bottom: Stack on mobile, row on tablet+ */
@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

CSS Location

Footer styles are defined in a modular CSS file for reuse across the app.

File Path 
/assets/css/ui/views/footer-public.css

/* Imported by ui-system.css */
@import url('./ui/views/footer-public.css');

/* Architecture Layer: Views (Patterns) */
/* Uses: tokens.css variables for all colors, spacing, typography */
/* No element dependencies - pure layout pattern */

Related Documentation

→ Colors → Typography → Guest Layout