Footer Components

Explore all footer component variants - main footer layouts, sub-footer styles, and theme options.

Main Footer Variants

The main footer supports 5 layout variants, each with 4 theme options (dark, light, green, white). Configure via site.json under footer.main.variant and footer.main.theme.

Footer — Links Only (Light)

Simple starting point: link columns only (no contact column). Add brand/contact features in the next examples.

{
  "pageFooter": {
    "main": {
      "variant": "links-right",
      "theme": "light",
      "bgClass": "bg-light",
      "textClass": "text-dark",
      "headingClass": "text-primary",
      "showContactColumn": false
    },
    "sub": {
      "variant": "logo-center",
      "theme": "light",
      "bgClass": "bg-light",
      "textClass": "text-dark"
    }
  }
}

<!-- Footer is rendered globally by layout/page-builder -->
<!-- Use `pageFooter` in page JSON for page-level overrides, or `site.footer` for global defaults. -->

Footer — Brand Left (Light)

Adds a logo + elevator pitch (brand block) to the footer.

{
  "pageFooter": {
    "main": {
      "variant": "brand-left",
      "theme": "light",
      "bgClass": "bg-light",
      "textClass": "text-dark",
      "headingClass": "text-primary",
      "brandBlock": {
        "showLogo": true,
        "tagline": "Schema-Driven Page Language",
        "description": "Generate validated JSON page specs with AI, render polished production-ready HTML."
      }
    },
    "sub": {
      "variant": "legal-social",
      "theme": "light",
      "bgClass": "bg-light",
      "textClass": "text-dark"
    }
  }
}

<!-- Footer is configured via site.json (recommended) -->

Footer — Contact Left (Light)

Adds contact info alongside the brand block (good for service businesses).

{
  "pageFooter": {
    "main": {
      "variant": "contact-left",
      "theme": "light",
      "bgClass": "bg-light",
      "textClass": "text-dark",
      "headingClass": "text-primary",
      "showCompanyName": true,
      "showAddress": true,
      "showContactInfo": true,
      "showBusinessHours": false,
      "showCertifications": false,
      "brandBlock": {
        "showLogo": true,
        "tagline": "Schema-Driven Page Language",
        "description": "Generate validated JSON page specs with AI, render polished production-ready HTML."
      }
    },
    "sub": {
      "variant": "minimal",
      "theme": "light",
      "bgClass": "bg-light",
      "textClass": "text-dark"
    }
  }
}

<!-- Footer is configured via site.json (recommended) -->

Footer — Centered (Light)

Centered / stacked layout for minimalist sites.

{
  "pageFooter": {
    "main": {
      "variant": "centered",
      "theme": "light",
      "bgClass": "bg-light",
      "textClass": "text-dark",
      "headingClass": "text-primary"
    },
    "sub": {
      "variant": "logo-center",
      "theme": "light",
      "bgClass": "bg-light",
      "textClass": "text-dark"
    }
  }
}

<!-- Footer is configured via site.json (recommended) -->

Footer — Minimal (White)

Cleanest option: compact links + minimal sub-footer.

{
  "pageFooter": {
    "main": {
      "variant": "minimal",
      "theme": "white",
      "bgClass": "bg-white",
      "textClass": "text-dark",
      "headingClass": "text-primary"
    },
    "sub": {
      "variant": "minimal",
      "theme": "white",
      "bgClass": "bg-white",
      "textClass": "text-dark"
    }
  }
}

<!-- Footer is configured via site.json (recommended) -->

Sub-Footer Variants

The sub-footer sits below the main footer and can display copyright, legal links, social icons, and company registration info. Configure via footer.sub.variant.

logo-center: Logo centered above copyright and legal links
legal-social: Legal links on left, social icons on right
minimal: Single line with copyright and inline legal links

Sub-Footer — Logo Center (Light)

Logo above copyright + legal links.

{
  "pageFooter": {
    "sub": {
      "variant": "logo-center",
      "theme": "light",
      "bgClass": "bg-light",
      "textClass": "text-dark"
    }
  }
}

<!-- Sub-footer is configured via site.json -->

Sub-Footer — Legal + Social (Light)

Legal links left, socials right.

{
  "pageFooter": {
    "sub": {
      "variant": "legal-social",
      "theme": "light",
      "bgClass": "bg-light",
      "textClass": "text-dark",
      "showSocialIcons": true
    }
  }
}

<!-- Sub-footer is configured via site.json -->

Sub-Footer — Minimal (Light)

Single line with copyright + inline legal links.

{
  "pageFooter": {
    "sub": {
      "variant": "minimal",
      "theme": "light",
      "bgClass": "bg-light",
      "textClass": "text-dark"
    }
  }
}

<!-- Sub-footer is configured via site.json -->

Theme Examples

All footer sections support 4 color themes that automatically style text, links, icons, and backgrounds.

Theme Example — Dark (only dark example)

Use dark footers sparingly and keep icon/heading contrast strong.

{
  "pageFooter": {
    "main": {
      "variant": "brand-left",
      "theme": "dark",
      "bgClass": "bg-dark",
      "textClass": "text-light",
      "headingClass": "text-warning"
    }
  }
}

<!-- Footer theme is configured via site.json -->

JSON Configuration

Configure your footer in src/data/site.json:

"footer": {
  "main": {
    "variant": "links-right",
    "theme": "dark",
    "showCertifications": true,
    "showBusinessHours": true,
    "showSocialIcons": true,
    "brandBlock": {
      "showLogo": true,
      "tagline": "Your Tagline",
      "description": "Company description..."
    }
  },
  "sub": {
    "variant": "logo-center",
    "theme": "dark",
    "showLogo": true,
    "showCompanyInfo": true,
    "showLegalLinks": true,
    "showSocialIcons": false,
    "separatorLine": true
  },
  "copyright": "All rights reserved."
}

Components