WhitepaperFooter Component

The WhitepaperFooter component provides a branded footer for whitepaper and landing page layouts. It displays copyright information and a link to 228.co with the company logo.

This is an internal (Coral Reef) component used across 228 deployments and is not included in the public package.

Usage

Basic Usage

WhitepaperFooter requires no props and renders a complete footer with copyright and branding.

import { WhitepaperFooter } from "@228-co/reef/components";

<WhitepaperFooter />

In a Page Layout

Typically placed at the bottom of a page layout as the final element.

function WhitepaperPage() {
  return (
    <div>
      <WhitepaperNav />
      <main>
        {/* Page content */}
      </main>
      <WhitepaperFooter />
    </div>
  );
}

Props

This component takes no props. All content and styling is self-contained.

NameTypeDefaultDescription
No props

Features

Dynamic year - Copyright year updates automatically

228 branding - Includes Logo228Shadow component and company link

Dark mode support - Adapts colors for light and dark color schemes

Responsive layout - Uses flexbox with wrap for mobile compatibility

Styling

The footer uses theme variables from Reef's theme system for consistent styling:

Border color adapts between neutral200 (light) and neutral800 (dark)

Copyright text uses neutral500 in both modes

Logo link uses neutral600 (light) and neutral400 (dark) for appropriate contrast

Spacing uses theme sizing tokens (spaceM for inline, spaceS for block)

Related Components

WhitepaperNav - Companion navigation component for whitepaper layouts

Container - Can be used to wrap page content between nav and footer