# SW Simple Footer — AI Agent Documentation

**Module path:** `smithworks-2025/sw-modules/SW Simple Footer.module` (smithworks portal); also in master `sw-master` (SW-Dev)  
**Reference:** MODULE-FIELD-LABELING-STANDARD.md, MODULE-SETTINGS-BACKGROUND-STANDARD.md, MODULE-CONTENT-COLORS-STANDARD.md  
**Last updated:** 2026.02.27

---

## 1. Overview

SW Simple Footer is a global footer module with logo, navigation menu, optional CTA buttons, rich text, social icons, copyright (year + company name from Settings > Account & Billing), simple links (e.g. Privacy, Legal, Contact), and an optional **Back to Top** button. It uses standard **Module Settings** (Style tab) for wrapper spacing (default 50px top/bottom, 25px left/right) and max width, **Module Background Settings** for background (theme color, custom, gradient, image, video), **Content Colors** for text and link colors (with separate controls for Content Area, Menu, and Footer Links), and **Module Background Video** (Content tab) when Background Option = Video. Company name comes from `site_settings.company_name` only (no module field). "Powered by Smithworks" appears after the company name with a dot separator and uses the **Content Area** link colors.

---

## 2. Content tab (order)

1. Custom ID, Custom Classes  
2. **Logo** — Logo Link, Logo Image (override), Alt Text. Uses brand kit logo by default.  
3. **Navigation** — Menu (HubSpot menu)  
4. **Buttons** (repeater) — Button Text, Button Link, Button Style, Button Size, Add Icon, Icon. Default: 1 item "Learn More". 10px margin left/right per button.  
5. **Rich Text Box** — group with **Content Area** (rich text) and **Content style** (Default, Large balanced, Large full-width, Small, Blockquote)  
6. **Social Icons** (repeater) — URL, Preset (Facebook, LinkedIn, X, Instagram, YouTube, TikTok, Custom), Icon Type (when Custom), Override Colors, Icon Color, Icon Hover Color.  
7. **Footer Links** (repeater) — Link Text, Link, Add Icon, Icon (position: Left/Right/Icon Only; purpose). Default: Privacy, Legal.  
8. **Back to Top** — Enable (default ON); Override Colors; Background Color, Icon Color, Icon Hover Color. Appears after 600px scroll; centered with 10px bottom clearance.  
9. **Module Background Video** — When Style → Background Option = Video.

---

## 3. Style tab (order)

1. **Module Settings** — Spacing (default 50/25/50/25), Max Module Width, Module height.  
2. **Module Background Settings** — Background Option (default: Theme Color / Dark).  
3. **Content Colors** — Text Color (Content Area text.); Content Area Link Colors; Menu Link Colors; Footer Links Colors. Each link type: Theme defaults, Dark, Light, or Custom. When Custom: Link Color (hex), Link Hover Color (hex), Link Text Decoration (Theme defaults/Underline/None), Link Hover Text Decoration. Per MODULE-CONTENT-COLORS-STANDARD.  
4. **Footer Alignment** — Alignment (left/center/right) for XL; Override Desktop/Tablet/Mobile with per-breakpoint alignment.

---

## 4. Content Colors (detail)

**Text Color:** Content Area text. Theme defaults, Primary, Secondary, Tertiary, White, Black, Dark, Light, Custom (with Custom Text Color hex). Default: Theme defaults.

**Content Area Link Colors:** Applies to rich text links and the "Powered by Smithworks" copyright link. Theme defaults, Dark, Light, or Custom. When Custom: Link Color (hex), Link Hover Color (hex), Link Text Decoration (Theme defaults/Underline/None), Link Hover Text Decoration. Default: Theme defaults.

**Menu Link Colors:** Applies to footer navigation menu links. Theme defaults, Dark, Light, or Custom. When Custom: Link Color, Link Hover Color, Link Text Decoration, Link Hover Text Decoration. Default: Theme defaults.

**Footer Links Colors:** Applies to Footer Links repeater items (Contact, Privacy, Legal, etc.). Theme defaults, Dark, Light, or Custom. When Custom: Link Color, Link Hover Color, Link Text Decoration, Link Hover Text Decoration. Default: Theme defaults.

**Text decoration:** Default = theme global settings. Override with Underline or None. Link color applies to active state; Link Hover applies to hover and focus.

---

## 5. Back to Top

**Content → Back to Top:**
- **Enable Back to Top** (default ON): Floating button appears after scrolling 600px; hidden when at top. Centered with 10px from bottom. Spacer prevents covering footer content. Smooth scroll on click.
- **Override Colors:** When ON, set Background Color, Icon Color, Icon Hover Color. Default: dark background, white icon.

---

## 6. Social Icons

Presets: Facebook, LinkedIn, X, Instagram, YouTube, TikTok, Custom. **Override Colors:** When ON, custom Icon Color and Icon Hover Color. When OFF, icons inherit Content Colors. Social links use `text-decoration: none`.

---

## 7. Footer Links (simple_link_items)

Link Text, Link, Add Icon, Icon (when Add Icon ON). Icon position: Left, Right, Icon Only. Icon Only shows only the icon; link text becomes aria-label for accessibility.
Default URLs use standard placeholder; replace with actual paths.

---

## 8. Common Tasks

- **Enable/disable Back to Top:** Content → Back to Top → Enable Back to Top  
- **Override Back to Top colors:** Content → Back to Top → Override Colors = ON  
- **Add social icons:** Content → Social Icons (repeater). Preset or Custom; Override Colors for custom icon colors.  
- **Change footer alignment:** Style → Footer Alignment  
- **Change content area text color:** Style → Content Colors → Text Color  
- **Change Content Area link colors:** Style → Content Colors → Content Area Link Colors (Theme defaults/Dark/Light/Custom; when Custom set hex colors and text decoration)  
- **Change menu link colors:** Style → Content Colors → Menu Link Colors  
- **Change footer links colors:** Style → Content Colors → Footer Links Colors  
- **Company name:** Settings → Account & Billing → Account default → Company information (not a module field)

---

## 9. Field paths (canonical)

- **Module Settings:** `module.styles.module_settings`  
- **Module Background Settings:** `module.styles.module_background_settings`  
- **Content Colors:** `module.styles.content_colors` — text_color, text_color_custom, link_context, link_color_custom, link_hover_color_custom, link_text_decoration, link_hover_text_decoration, menu_link_colors, menu_link_color_custom, menu_link_hover_color_custom, menu_link_text_decoration, menu_link_hover_text_decoration, footer_links_link_colors, footer_links_link_color_custom, footer_links_link_hover_color_custom, footer_links_link_text_decoration, footer_links_link_hover_text_decoration  
- **Footer Alignment:** `module.styles.footer_alignment`  
- **Back to Top:** `module.back_to_top_group` — enabled, override_colors, background_color, icon_color, icon_hover_color  
- **Social Icons:** `module.social_icon_items`  
- **Simple Links (Footer Links):** `module.simple_link_items` — link_text, link, add_icon, icon (icon, position, purpose)  
- **Rich Text Box:** `module.rich_text_group` — rich_text (Content Area), content_style  
- **Company name:** `site_settings.company_name`

---

## 10. CSS classes (key selectors)

- `.sw-simple-footer` — module wrapper  
- `.sw-simple-footer__back-to-top` — fixed button (`.is-visible` when scrolled)  
- `.sw-simple-footer__back-to-top-spacer` — clearance when Back to Top enabled  
- `.sw-simple-footer__social-link` — social icon links  
- `.sw-simple-footer__copyright` — copyright block  
- `.sw-simple-footer__copyright-link` — "Powered by Smithworks" link (uses Content Area link colors)  
- `.sw-simple-footer__links` — footer links container  
- `.sw-simple-footer__link` — footer links (simple_link_items)  
- `.sw-simple-footer__menu-link` — navigation menu links