Footer

Footer is a presentational layout component that renders fixed e-INFRA CZ content, support information, external links, and a configurable logo.

Preview

Usage

tsx

1
2
3
import { Footer } from '@e-infra/design-system'

<Footer />

Custom Logo

tsx

1
2
3
4
5
6
import customLogo from './my-logo.png'

<Footer
  logo={customLogo}
  logoAlt="My organization logo"
/>

Optional Tag

tsx

1
<Footer tag="build-2026-04-13" />

Props

Prop	Type	Default	Description
logo	`string \| { src: string; width?: number; height?: number }`	bundled e-INFRA logo asset	Logo source for the centered image near the bottom
logoAlt	`string`	`e-INFRA CZ Logo`	Alt text for the logo image
tag	`string`	`undefined`	Optional small text rendered at the right side of the bottom row on desktop (below on mobile)

Structure

Section	Details
Outer footer	`footer` with `mt-0 flex flex-col items-center border-t border-border bg-background px-5 pb-5`
Main content row	Three-column responsive layout inside `mx-auto flex w-full max-w-275 flex-col items-center justify-between md:flex-row md:items-start`
Dividers	Vertical separators shown from `md:` upward
Logo row	`mx-auto mt-4 flex w-full max-w-275 items-center justify-center` with `img` class `h-22 w-auto`
Bottom meta row	`mx-auto flex w-full max-w-275 flex-col items-center justify-center md:flex-row md:justify-between` with copyright, privacy link, and optional `tag`

Built-in Content

e-INFRA CZ Section

Displays a fixed description of the e-INFRA CZ research infrastructure, including CERIT-SC, CESNET, and IT4Innovations.

General Information

Renders two fixed links:

https://blog.e-infra.cz/
https://e-infra.cz/

Each link is rendered through an internal RedirectListItem helper using:

icon MoveRight
anchor class text-primary hover:text-primary/80 flex items-center gap-2 transition-colors

Support

Renders the following fixed support items with icons:

Available non-stop
support@e-infra.cz
+420 234 680 222

Footer Meta

The bottom row contains:

Copyright © 2025 e-INFRA CZ
Privacy policy link to https://www.e-infra.cz/en/personal-data-processing
Optional tag text when provided

Behavior

Behavior	Details
Responsiveness	Stacks content vertically on small screens and switches to a horizontal three-column layout on `md:`
Alignment	Content is centered on mobile and left-aligned within each section on larger screens
Logo handling	Accepts either a plain string URL or an object with a `src` field
Logo resolution	Internally resolves both string and static-import object formats via `resolveLogoSrc`
Conditional tag	`tag` is rendered only when provided
External links	Blog, website, email, and privacy policy are built into the component

Notes

This component is intentionally opinionated. Most visible content is fixed in the implementation. Public customization is limited to logo, logoAlt, and optional tag. If you need custom footer sections or different links, the component implementation needs to be extended.