A reusable, themeable footer component for the 4x4Sys network (Hypercart, 4x4Clarity, Love2Hug, GetDashboard). Available in multiple formats for easy integration across different platforms.
Licensed under Apache License 2.0 — Free to use, modify, and distribute for your own projects with attribution.
v1.2.0+ supports complete syndication of both styles and content:
✅ CSS from CDN — Automatic style updates across all sites ✅ Content from CDN — Link URLs, labels, tooltips update automatically ✅ Zero maintenance — Update once in GitHub, all sites update ✅ No rebuilds needed — Changes propagate without redeployment
Supported platforms:
- React/Lovable — Full syndication (CSS + content via
footer-data.json) - WordPress — Full syndication (CSS + HTML from CDN)
- Static HTML — CSS syndication (content is manual copy/paste)
Choose your implementation method:
| Method | Best For | Syndication Level | Documentation |
|---|---|---|---|
| React/Lovable ⭐ | React apps, Lovable AI | Full (CSS + Content) | Lovable Guide |
| WordPress Plugin ⭐ | WordPress sites | Full (CSS + HTML) | WordPress Guide |
| HTML + CSS | Static sites | Partial (CSS only) | HTML Setup |
| CDN Direct | External integrations | Full (CSS + HTML) | CDN Syndication |
wp-syndicated-footer-poc/
├── README.md # This file
├── LICENSE.md # Apache 2.0 license
├── CHANGELOG.md # Version history & breaking changes
├── ROADMAP.md # Future enhancement ideas
├── AUDIT.md # Documentation audit report
├── footer.html # Plain HTML footer (source markup)
├── footer.css # Stylesheet (namespaced .hc-*)
├── footer-data.json # Syndicated link data (v1.2.0+)
├── footer-config.json # Example config for React/Lovable (v1.1.0+)
├── hypercart-network-footer.php # WordPress plugin w/ CDN fallback
├── lovable-footer-guide.md # React/Lovable integration prompt
└── wordpress-footer-guide.md # WordPress WPCode integration steps
Each implementation is a view of the same component. The core design is:
- footer.html — canonical HTML structure
- footer.css — namespaced styles (
.hc-*prefix) - Platform-specific guides — integration instructions for each framework
All implementations render identical visuals and use the same CSS class structure. This repository emphasizes consistency across platforms so you can move the footer between projects without redesigning it.
For static sites or manual integration:
-
Add to your HTML
<head>:<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet"> <!-- ⭐ RECOMMENDED: Use CDN for automatic style updates --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Hypercart-Dev-Tools/wp-syndicated-footer-poc@main/footer.css"> <!-- Alternative: Local copy (not recommended - misses automatic updates) <link rel="stylesheet" href="footer.css"> -->
-
Add to your HTML
<body>(before closing</body>):<footer class="hc-footer"> <!-- Copy the contents from footer.html here --> </footer>
Note: Static HTML requires manual content updates. For automatic content updates, use React/Lovable or WordPress implementations.
-
Verify:
- Footer appears at bottom of page
- DM Mono and Instrument Serif fonts load
- Lime accent line visible at top
- Links are operational
⭐ RECOMMENDED APPROACH: Use jsDelivr CDN for full syndication (mirrors GitHub with proper caching).
CSS (All platforms):
https://cdn.jsdelivr.net/gh/Hypercart-Dev-Tools/wp-syndicated-footer-poc@main/footer.css
Content Data (React/Lovable):
https://cdn.jsdelivr.net/gh/Hypercart-Dev-Tools/wp-syndicated-footer-poc@main/footer-data.json
HTML (WordPress, Static sites):
https://cdn.jsdelivr.net/gh/Hypercart-Dev-Tools/wp-syndicated-footer-poc@main/footer.html
Use version tags to prevent breaking changes:
https://cdn.jsdelivr.net/gh/Hypercart-Dev-Tools/wp-syndicated-footer-poc@v1.2.0/footer.css
https://cdn.jsdelivr.net/gh/Hypercart-Dev-Tools/wp-syndicated-footer-poc@v1.2.0/footer-data.json
https://cdn.jsdelivr.net/gh/Hypercart-Dev-Tools/wp-syndicated-footer-poc@v1.2.0/footer.html
✅ Single source of truth — Update once in GitHub, all sites update
✅ Zero maintenance — No manual updates across multiple sites
✅ Automatic propagation — Changes appear within 24 hours (CDN cache TTL)
✅ Version control — Lock to specific versions or use @main for latest
✅ Performance — Global CDN with edge caching
Recommendation:
- Production sites: Use versioned URLs (
@v1.2.0) for stability - Development/staging: Use
@mainfor latest features - All sites: Use CDN for CSS (at minimum) to get automatic style updates
- Namespace: All classes prefixed with
.hc-to prevent collisions - CSS Framework: Standalone CSS (no Tailwind, no Bootstrap)
- Fonts: DM Mono (body), Instrument Serif italic (network label)
- Color Scheme: Dark theme with lime accent (
#e8fc5a) - Responsive: Mobile stacked layout at
768pxbreakpoint
hc-footer // Footer container
├── hc-footer__inner // Content wrapper
├── hc-footer__row1 // Product pills section
│ ├── hc-footer__network-label
│ ├── hc-footer__product // Product pill
│ ├── hc-footer__arrow // External link indicator
│ └── hc-tooltip // Hover tooltip
└── hc-footer__row2 // Links section
├── hc-footer__copyright
├── hc-footer__links
├── hc-footer__link
└── hc-footer__sep // Separator (·)
- External Links: Open in new tab (
target="_blank" rel="noopener") - Internal Links:
/tos/,/privacy/,/system/,/help/(with trailing slashes) - All links are consistent across implementations
- Horizontal product pill layout
- Row 1: Network label + product pills
- Row 2: Copyright + footer links (flex row)
- Tooltips visible on hover
- Tooltips hidden (no hover on touch screens)
- Vertical stacking (links wrap as needed)
- Padding reduced for narrower screens
- Product pills smaller but fully functional
After implementation, verify:
- Footer appears at bottom of every page
- Fonts load correctly (DM Mono for body, Instrument Serif italic for "4x4Sys Network")
- Lime accent line visible at top of footer
- All external links (4x4Clarity, Love2Hug, GetDashboard, network link) open in new tab
- Internal links (Terms, Privacy, System, Help) navigate correctly
- Product pill tooltips appear on desktop hover
- Mobile layout is responsive (pills and links stack properly on phones)
- No CSS conflicts with existing theme/styles (
.hc-namespace ensures isolation) - Internal links use client-side routing if applicable (no full page reload)
- Status: Both the React and WordPress implementations include fallback HTML
- Result: Footer still renders from hardcoded markup if CDN is offline
- Testing: Disable internet or block
cdn.jsdelivr.netto verify fallback - Monitoring: Check
console.warn()(React) or WordPress error logs (PHP)
- Common cause: Network privacy settings or CDN blocking
- Fallback:
font-familyincludes fallback stack (monospace → system fonts) - Check: Open DevTools → Network tab → filter
fonts.googleapis.com
- React: If using
react-router, the Lovable guide can convert<a>→<Link>components - WordPress: Standard
<a>tags work with client-side routing plugins - Testing: Open NetworkJavaScript console → click each internal link and watch for full page reload (should not occur if properly routed)
- Issue: Theme might have its own footer
- Fix: Hide with CSS in WPCode:
.site-footer:not(.hc-footer) { display: none !important; }
- Verify:
<link rel="stylesheet" href="footer.css">points to correct path - Check: DevTools → Network tab → CSS file loads with status 200
- CDN: Try CDN URL instead of local:
https://cdn.jsdelivr.net/gh/Hypercart-Dev-Tools/wp-syndicated-footer-poc@main/footer.css
- Lovable/React Guide — Step-by-step prompt for AI-assisted React component generation (includes config-based customization)
- WordPress Guide — WPCode snippets for WordPress sites
- HTML/CSS Only — Manual integration for static sites
NEW in v1.2.0: Footer content (URLs, labels, tooltips) is now syndicated from CDN via footer-data.json!
The React/Lovable implementation fetches:
- Syndicated link data from CDN (
footer-data.json) — URLs, labels, tooltips - Local visibility config from
public/footer-config.json(optional) — which links to show/hide
Create public/footer-config.json to customize which links are shown:
{
"showTooltips": true,
"links": {
"clarity": true,
"love2hug": true,
"getdashboard": true,
"network": true,
"terms": true,
"privacy": true,
"system": false,
"help": false
}
}The footer content is automatically fetched from:
https://cdn.jsdelivr.net/gh/Hypercart-Dev-Tools/wp-syndicated-footer-poc@main/footer-data.json
This means:
- ✅ Update once, deploy everywhere — Change
footer-data.json, all sites update - ✅ No rebuilds needed — Content updates without redeploying React apps
- ✅ Backward compatible — Existing v1.1.0 sites continue working with hardcoded defaults
Features:
- Syndicated content — Link URLs, labels, and tooltips fetched from CDN
- Toggle individual links — Hide links not needed on specific sites (local config)
- Disable tooltips — Set
showTooltips: falseto work around z-index conflicts - Runtime updates — Change config without rebuilding the React app
- Graceful fallback — Component works without config file (all links shown by default)
Example use cases:
- Hide "System" and "Help" links on marketing sites
- Disable tooltips if they conflict with existing UI elements
- Show only product pills on landing pages
See Lovable Guide for full configuration documentation.
Future enhancements (see ROADMAP.md):
- Link URL/label overrides
- Custom link additions
- Theme color customization
This footer follows semantic versioning:
- MAJOR (v2.0.0) — Breaking changes (class names, HTML structure, link paths)
- MINOR (v1.1.0) — New features (new product pill, new link), backward compatible
- PATCH (v1.0.1) — Bug fixes (CSS tweaks, font rendering improvements)
- @main: Always pulls latest (living edge, may have breaking changes)
- @v1.0.0: Locks to specific version (stable, predictable)
- Local copies: Manually update or switch to CDN for automatic updates
See CHANGELOG.md for detailed version history.
Found a bug or design inconsistency? Please open a GitHub issue with:
- Current implementation method (HTML, React, WordPress)
- Browser/version
- Screenshot or error log
- Steps to reproduce
To modify the footer:
- Edit
footer.html(structure) orfooter.css(styles) - Update version in
hypercart-network-footer.phpheader - Add entry to
CHANGELOG.md - Create a git tag:
git tag v1.0.1 - Push to trigger CDN cache clear
# Static site testing
open footer.html
# WordPress plugin testing
1. Copy hypercart-network-footer.php into wp-content/plugins/
2. Activate in WordPress admin
3. View site → footer should appear
# React/Lovable testing
Copy the prompt from lovable-footer-guide.md into Lovable interfaceApache License 2.0
Copyright 2026 Hypercart / 4x4Sys Network
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at:
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
TL;DR: Free to use, modify, and distribute in personal or commercial projects. See LICENSE.md for full terms.