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.
Links Right (Default)
3 link columns with contact info on the right
Brand Left
Logo, tagline, and description on left with link columns on right
Contact Left
Full contact details and logo on left with link columns on right
Centered Layout
All content centered and stacked for a clean, modern look
Minimal
Compact footer with essential links only
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
Sub-Footer: Legal + Social
Sub-Footer: Minimal
Theme Examples
All footer sections support 4 color themes that automatically style text, links, icons, and backgrounds.
Dark Theme
Black background with gold headings and grey text
Light Theme
Grey background with green headings and dark text
Green Theme
Brand green background with gold headings and white text
White Theme
White background with green headings and dark text, subtle top border
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."
}