Brand
convert.com

Footer

The site footer, link columns, sustainability and compliance badges, and the © baseline, as a self-contained copy-paste block.

Examples

Desktop

Convert

2093 PHILADELPHIA PIKE #9985, CLAYMONT, DE 19703, USA
(US) +1-888-666-9711

Start 15-Day Free Trial

Product & Solutions

CRO Agencies

Resources

Company

© 2026, Convert Insights Inc. All rights reserved Terms of UsePrivacy NoticeOpt Out

Mobile

Convert

2093 PHILADELPHIA PIKE #9985, CLAYMONT, DE 19703, USA
(US) +1-888-666-9711

Start 15-Day Free Trial

Product & Solutions

CRO Agencies

Resources

Company

© 2026, Convert Insights Inc. All rights reserved Terms of UsePrivacy NoticeOpt Out
The footer is a self-contained page-level block, see it live at the bottom of any Convert page. Below is how to add it and what it contains.

The footer is a light-theme <footer class="footer"> block built from four stacked rows inside a centered .footer-inner wrapper:

  • Top grid: a brand block (logo, address, "Start 15-Day Free Trial" CTA, and five social icons) alongside four link columns: Product & Solutions, CRO Agencies, Resources, and Company.
  • Climate row: sustainability marks: trees planted, Climate Neutral certified, and 1% for the Planet.
  • Compliance badges: ISO 27001, SOC 2, HIPAA, GDPR, CCPA, and Zero Security Breaches, desaturated by default and colorized on hover.
  • Baseline row: the © copyright line ("© 2026, Convert Insights Inc. All rights reserved") and legal links (Terms of Use, Privacy Notice, Opt Out).

Usage

The footer ships its own markup and <style> in one block, copy the entire contents of /_shared/components/footer.html into your page <body>, just before </body>.

  • Copy the whole block from /_shared/components/footer.html into your <body>, just before </body>. It is self-contained.
  • Keep one footer per page, it is a page-level landmark (role="contentinfo"), so it should appear exactly once.
  • Update the year in the baseline (© 2026, Convert Insights Inc.) as needed.
  • Ensure /_shared/tokens.css and /_shared/assets/logo-blue.svg are reachable so the footer renders with brand tokens and the logo.

States

  • Static (default), the footer is mostly static; it does not animate or change layout beyond responsive reflow at narrower breakpoints.
  • Link hover: nav-column links shift to --color-blue-600, while brand, social, and baseline links darken toward --color-ink-900 on hover.
  • Badge hover-swap: compliance badges are desaturated by default and colorize on hover: SVG pairs swap a default for a hover variant (.footer-badge--swap), while single-asset PNG badges drop their grayscale filter (.footer-badge--filter).

Code

The footer is self-contained: there is no separate component stylesheet to link. Copy the full block from the shared file into your page:

<!-- Copy the full block from /_shared/components/footer.html into your <body> before </body> -->