Skip to main content

​
Footer Component

The Footer component is a comprehensive site footer with multiple columns for company information, navigation links, social media, and contact details.

​
Overview

Implemented in footer-loader.js as an exportable HTML string, the footer provides:
  • Multi-column layout: Responsive grid with 5 information columns
  • Social media integration: Links to Instagram, Facebook, YouTube, and WhatsApp
  • Contact information: Email and phone numbers for different departments
  • Discipline indicators: Visual color coding for different service areas
From footer-loader.js:6: 
export const footerHTML = `
<footer>
  <div class="footer-container">
    <div class="footer-col" data-column="1">
      <div class="footer-logo">
        <img src="./assets/images/favicons/klef-logo.png" alt="Klef Logo" width="30" height="30">
        Klef Agency
      </div>
      <p class="footer-description">
        Laboratorio creativo. Estrategia que respira. Innovación que se
        siente.
      </p>
    </div>

    <div class="footer-col" data-column="2">
      <h4 class="footer-heading">Compañía</h4>
      <ul class="footer-links">
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contacto</a></li>
        <li class="new-badge">
          <a href="#">Portafolio</a>
          <span style="
                background: var(--k-blue, #007aff);
                font-size: 0.7rem;
                padding: 2px 6px;
                border-radius: 4px;
                margin-left: 5px;
                color: #fff;
              ">
            Nuevos
          </span>
        </li>
      </ul>
    </div>
    
    <!-- More columns... -->
  </div>
  
  <div class="footer-bottom">
    © 2026 Klef. Todos los derechos reservados. | Hecho con tecnología Klef 100% nativa.
  </div>
</footer>
`;

​
Discipline Indicators

From footer-loader.js:48: 
<div class="footer-col" data-column="3">
  <h4 class="footer-heading">Explora</h4>
  <ul class="footer-links">
    <li>
      <a href="#">
        <span class="discipline-indicator" style="--c1: var(--brands, #ff6b6b)"></span>
        Brands
      </a>
    </li>
    <li>
      <a href="#">
        <span class="discipline-indicator" style="--c1: var(--dev, #4ecdc4)"></span>
        Devs
      </a>
    </li>
    <li>
      <a href="#">
        <span class="discipline-indicator" style="--c1: var(--studio, #a29bfe)"></span>
        Studio
      </a>
    </li>
    <li>
      <a href="#">
        <span class="discipline-indicator" style="--c1: var(--strategy, #fdcb6e)"></span>
        Strategy
      </a>
    </li>
  </ul>
</div>
From footer-loader.js:76: 
<div class="footer-col" data-column="4">
  <h4 class="footer-heading">Síguenos</h4>
  <ul class="footer-links">
    <li>
      <a href="https://www.instagram.com/klef.agency/" target="_blank" rel="noopener noreferrer" aria-label="Síguenos en Instagram" class="social-link">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <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-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.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.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path>
        </svg>
        Instagram
      </a>
    </li>
    <!-- More social links... -->
  </ul>
</div>

​
Contact Information

From footer-loader.js:112: 
<div class="footer-col" data-column="5">
  <h4 class="footer-heading">Contacto</h4>
  <ul class="footer-links">
    <li>
      <a href="mailto:[email protected]" class="contact-link">[email protected]</a>
    </li>
    <li class="contact-item">
      <a href="tel:+526245161037" target="_blank" rel="noopener noreferrer" class="contact-link contact-label">
        <span class="contact-type">Atencion al cliente:</span>
        <span class="contact-value">+52 (624) 516 1037</span>
      </a>
    </li>
    <li class="contact-item">
      <a href="tel:+526241682048" target="_blank" rel="noopener noreferrer" class="contact-link contact-label">
        <span class="contact-type">Soporte técnico:</span>
        <span class="contact-value">+52 (624) 168 2048</span>
      </a>
    </li>
  </ul>
</div>

​
Styling

From footer.css:2: 
footer {
  background: var(--k-dark, #000);
  color: #fff;
  --py: 4rem;
  --px: 2rem;
  padding: var(--py) var(--px) 8rem;
}

footer .footer-container {
  max-width: var(--k-max, 1200px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  --gap: 3rem;
  gap: var(--gap);
}
From footer.css:24: 
footer .footer-logo {
  font-weight: 700;
  font-size: 1.5rem;
  --mb: 1.5rem;
  margin-bottom: var(--mb);
  display: flex;
  align-items: center;
  --gap: 0.5rem;
  gap: var(--gap);
}

​
Discipline Indicators

From footer.css:68: 
footer .discipline-indicator {
  background: var(--c1);
  font-size: 0.7rem;
  border-radius: 4px;
  margin: 0px 5px 2.5px 0px;
  --c: #fff;
  --wh: 15px;
  width: var(--wh);
  height: var(--wh);
  display: inline-block;
}

[data-column]:has(.discipline-indicator) a {
  align-items: center;
}
From footer.css:84: 
footer .social-link {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  --gap: 8px;
  gap: 8px;
}

footer .social-link:hover {
  color: #fff;
}

​
Contact Styling

From footer.css:109: 
footer .contact-item {
  margin-top: 1rem;
}

footer .contact-link {
  display: flex;
  flex-direction: column;
  color: var(--k-light-gray, #999);
  text-decoration: none;
}

footer .contact-link:hover {
  color: #fff;
}

footer .contact-type {
  color: var(--k-light-gray, #999);
}

footer .contact-value {
  margin-top: 0.25rem;
  font-weight: 500;
}

​
Responsive Design

From footer.css:150: 
@media (max-width: 768px) {
  footer {
    --py: 3rem;
    --px: 1.5rem;
    padding-bottom: 6rem;
  }

  footer .footer-container {
    grid-template-columns: 1fr;
    --gap: 2rem;
  }
}

​
Usage

​
Import and Render

import { footerHTML } from '/shared/components/footer/footer-loader.js';

// Insert into page
document.body.insertAdjacentHTML('beforeend', footerHTML);

​
Or use as module export

import footerHTML from '/shared/components/footer/footer-loader.js';

const footerContainer = document.getElementById('footer-container');
footerContainer.innerHTML = footerHTML;

​
CSS Variables

The footer uses these CSS custom properties:
  • --k-dark: Background color (default: #000)
  • --k-max: Maximum content width (default: 1200px)
  • --k-light-gray: Secondary text color (default: #999)
  • --k-blue: Accent color for badges
  • --brands, --dev, --studio, --strategy: Discipline indicator colors

​
Accessibility Features

  • Semantic HTML structure
  • aria-label attributes on social links
  • rel="noopener noreferrer" on external links
  • Proper link contrast ratios
  • Keyboard navigable

​
Browser Support

Requires:
  • CSS Grid
  • CSS Custom Properties
  • Flexbox
  • ES6 modules (for import)

Build docs developers (and LLMs) love

Get started for freeTalk to us