Footer

The marketing site footer: brand name, an email/social row, a center slot for link columns, and a bottom bar with copyright, a GDPR badge, and the "From France" flag. Place it right after <Base>, as the last thing on the page.

Properties

Name
Default
Description
name
"HYVOR"
The brand name shown top-left.
subname
An optional line shown under name.
product
Product slug (e.g. "blogs"), same as Header. Derives the mascot's logo automatically when not given directly.
instance
"https://hyvor.com"
Base URL used to build the product-derived mascot logo.
logo
URL/path to an optional mascot/logo image, overriding the product-derived default.
background
A CSS color for the footer. When omitted, the footer stays transparent and follows the app's theme.
backgroundDark
Overrides background in dark mode (e.g. a darker variant). Optional: background is used in both themes if omitted.
card
false
Whether background is a branded color needing light text/borders regardless of theme. Leave off for a subtle tint that should keep the app's normal text color.
email
null
The email address to show in the footer.
social
null
An object mapping social keys to URLs: x, discord, github, youtube, linkedin, bluesky. All show by default with HYVOR's accounts; pass a key as undefined to hide it.
languageToggle
true
Whether to show the language switcher next to the socials.
gdpr
true
Whether to show the "GDPR Compliant" badge in the bottom bar.
affiliate
true
Whether to handle affiliate-referral tracking/consent.
recordVisit
true
Whether to load the visit-tracking script.
max
true
Set the width for 1440px of the footer.
logoAltText
"Logo"
The word appended to the mascot's alt text (e.g. "HYVOR Logo"). Translate this when localizing the page - name is product-defined and stays as-is.
copyEmailLabel
"Copy email"
Tooltip shown on the "copy email" button. Translate this when localizing the page.
copiedLabel
"Copied!"
Tooltip shown after the email address is copied. Translate this when localizing the page.
gdprText
"GDPR Compliant"
Text on the GDPR compliance chip. Translate this when localizing the page.
fromFranceText
"From France"
Text next to the France flag in the bottom bar. Translate this when localizing the page.

Slots

Name
Description
center
The link columns area, between the top row and bottom bar. Usually one FooterLinkList per column, wrapped in your own container.

Example

The following example shows how to use the Footer and FooterLinkList components to create a branded footer with two columns. See it in the full page assembled on /test.

<Footer
    name="Hyvor Blogs"
    logo="/logo.svg"
    background="#574443"
    backgroundDark="#2a1f1e"
    card={true}
    email="[email protected]"
    social={{
        x: 'https://x.com/HyvorHQ'
    }}
>

	<FooterLinkList title="Product">
		<a href="pricing" target="_blank">Pricing</a>
		<a href="docs" target="_blank">Docs</a>
		<a href="customers" target="_blank">Customers</a>
	</FooterLinkList>

	<FooterLinkList title="HYVOR">
		<a href="https://hyvor.com" target="_blank">hyvor.com</a>
	</FooterLinkList>

</Footer>
HYVOR Logo