AppFooter

App

Two-row application footer with logo, navigation links, system status badge, version, copyright, and social slot.

Preview

Code

<%- include('modules/app/AppFooter', {
  logoContent: 'Acme',
  version:   '2.4.1',
  status:    'operational',
  copyright: '© 2026 Acme Corp. All rights reserved.',
  navContent: `
    Docs
    Changelog
    Support
    Pricing
  `,
  socialContent: `
    
    
    
  `
}) %>

Preview

Code

<%- include('modules/app/AppFooter', {
  logoContent: 'Acme',
  status:    'degraded',
  copyright: '© 2026 Acme Corp.'
}) %>

<%
  var _status = locals.status || null;
  var statusMap = {
    operational: { cls: 'bg-success-subtle text-success-fg', dot: 'bg-success', label: 'Operational' },
    degraded:    { cls: 'bg-warning-subtle text-warning-fg', dot: 'bg-warning', label: 'Degraded' },
    outage:      { cls: 'bg-error-subtle text-error-fg',     dot: 'bg-error',   label: 'Outage' }
  };
  var _sc = _status ? statusMap[_status] : null;
%>

  
    
      <% if (locals.logoContent) { %><%- locals.logoContent %><% } %>
      <% if (locals.version) { %>
      <%# Badge variant="neutral" size="md" %>
      v<%= locals.version %>
      <% } %>
    
    <% if (locals.navContent) { %>
    <%- locals.navContent %>
    <% } %>
    <% if (_sc) { %>
    <%# Badge variant= size="md" dot %>
    
      
      <%= _sc.label %>
    
    <% } %>
  
  
    <% if (locals.copyright) { %><%= locals.copyright %><% } %>
    <% if (locals.socialContent) { %><%- locals.socialContent %><% } %>

AppFooter

Full — logo + nav + status + social

Minimal — copyright + status only