RSK World - Footer Component | Modern Footer Layouts, Theme, Newsletter, Copy HTML | RSK World

6 Footer Layouts Theme & Newsletter Copy HTML & Shortcuts Accessibility Vanilla JS

Footer Component is a modern footer UI library with 6 layouts. Features: classic multi-column, centered minimal, dark with CTA, wave divider (SVG), mega with trust badges, split CTA. Theme switcher (light/dark/system), font size controls (A−/100%/A+), quick-jump nav (1–6), copy HTML per layout with toast, keyboard shortcuts (?), back-to-top button, cookie consent bar, skip link and focus-visible for accessibility. CSS: variables.css, utilities.css, animations.css, styles.css. JS: toast, theme, font-size, shortcuts, copy-code, back-to-top, accessibility, cookie-consent, main, optional footer-from-config.js. By rskworld.in.

If you find this Footer Component project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Footer Component

Footer Layouts & Styles

styles.css: 6 layouts – classic multi-column, centered minimal, dark with CTA, wave divider (SVG), mega with trust badges, split CTA. variables.css: design tokens and dark theme. animations.css: social hover, back-to-top, cookie bar. Responsive grids and breakpoints.

styles.css: .footer-classic, .footer-minimal, .footer-dark, .footer-wave, .footer-mega, .footer-split
variables.css: --footer-accent, --footer-bg, data-theme dark/light
config.json for brand, contact, links, social, newsletter
Keyboard: ? shortcuts; Esc close; Copy HTML with toast

Project Structure & Files

Root: index.html (demo with 6 layouts), config.json, css/ (variables, utilities, animations, styles), js/ (toast, theme, font-size, shortcuts, copy-code, back-to-top, accessibility, cookie-consent, main, footer-from-config). examples/standalone-footer.html. No build step. Open index.html or serve folder.

index.html, config.json, css/*.css, js/*.js, examples/standalone-footer.html
No build step – open index.html or static server
Font Awesome 6, CSS custom properties
Zero dependencies; vanilla HTML, CSS, JavaScript

Theme & Animations

variables.css: design tokens for light/dark. theme.js: Light/Dark/System with localStorage. animations.css: social hover lift, back-to-top visibility, cookie bar slide-up, optional animate-in. Reduced-motion support. utilities.css: skip link, sr-only, print styles.

data-theme attribute, .theme-toggle-wrap, theme.js
Social hover transform, cookie bar slide, back-to-top
prefers-reduced-motion: reduce respected
Print: toolbar, copy buttons, cookie bar hidden

Demo & Copy HTML

index.html: 6 layout sections with quick-jump (1–6), font size (A−/100%/A+), Copy HTML per layout (toast). examples/standalone-footer.html: single footer in page. footer-from-config.js: inject footer from config.json into a container.

Quick-jump nav to layout 1–6, Copy HTML copies footer + wave SVG
Toast for copy success, newsletter, font size
Accessibility: skip link, focus-visible
FooterFromConfig.init(container, configPath) for dynamic footer

Sections & Navigation

index.html: Demo header, toolbar (quick-jump, font size, shortcuts hint), layout sections 1–6 each with heading and Copy HTML. Theme toggle fixed top-right. Back-to-top on scroll. Cookie bar at bottom. Main content id=skip-target.

index.html – all 6 footer layouts and demo toolbar
copy-code.js: injects Copy HTML per .layout-section
Smooth scroll, passive scroll for back-to-top
Accessibility: skip link, aria-live toasts

What You Get

Static HTML/CSS/JS: index.html, config.json, css/variables.css, utilities.css, animations.css, styles.css, js/toast.js, theme.js, font-size.js, shortcuts.js, copy-code.js, back-to-top.js, accessibility.js, cookie-consent.js, main.js, footer-from-config.js, examples/standalone-footer.html, README.md. No build step. Open index.html or serve folder.

Complete source – all HTML, CSS and JS files in project
No build step – open index.html or static server
README.md included with features and usage
Technologies: HTML5, CSS3, Vanilla JS. © 2026 RSK World.

Usage

Open index.html. Use theme toggle, quick-jump (1–6), font size (A−/A+), Copy HTML on any layout. Press ? for shortcuts. Accept cookies to hide bar. For dynamic footer: include footer-from-config.js, add #footer-container, call FooterFromConfig.init('#footer-container', 'config.json').

index.html – demo with 6 layouts and toolbar
config.json and CSS variables for theming
Accessibility: skip link, reduced motion
Author: RSK World | rskworld.in

Project Features

6 footer layouts (classic, minimal, dark CTA, wave, mega, split), theme switcher (light/dark/system), font size (87.5%–125%), quick-jump, Copy HTML with toast, keyboard shortcuts (?), back-to-top, cookie consent, skip link, optional dynamic footer from config.json.