Skip to main contentSkip to sidebarSkip to headerSkip to footer

Footer Container

A layout container for the footer section of a page.

Installation

Import the component from the passport-ui package.

components/example.tsx
1
import { FooterContainer } from "passport-ui";

Usage

Basic example showing how to use the component.

components/example.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<FooterContainer
  sticky={true}
  blurred={true}
  variant="full"
>
  <div className="flex flex-col md:flex-row justify-between items-center gap-4">
    <div className="flex flex-col md:flex-row items-center gap-4">
      <p>&copy; 2024 My Company. All rights reserved.</p>
    </div>
 
    <div className="flex items-center gap-4">
      <Link href="/privacy" className="text-sm hover:underline">
        Privacy Policy
      </Link>
      <Link href="/terms" className="text-sm hover:underline">
        Terms of Service
      </Link>
      <Link href="/contact" className="text-sm hover:underline">
        Contact
      </Link>
    </div>
  </div>
</FooterContainer>
 
{/* Different variants */}
<FooterContainer variant="compact">
  <p className="text-center">Compact footer</p>
</FooterContainer>
 
<FooterContainer variant="broad" sticky={false}>
  <div className="text-center">
    <p>Non-sticky broad footer</p>
  </div>
</FooterContainer>

Additional resources

Documentation and examples are available in Storybook.

View in Storybook ↗