Footer

Polymorphic Component

By default, content is rendered inside a <div>, but this can be overriden by passing any valid tag name or component with the as prop.

Examples

Dark Footer

By default, the Footer has a dark background.

import { Footer } from '@curology/ui-components-web/react/Footer';
import { FooterBody } from '@curology/ui-components-web/react/Footer/FooterBody';
import { FooterNav } from '@curology/ui-components-web/react/Footer/FooterNav';
import { FooterNavColumn } from '@curology/ui-components-web/react/Footer/FooterNavColumn';
import { FooterLink } from '@curology/ui-components-web/react/Footer/FooterLink';
import { FooterSocial } from '@curology/ui-components-web/react/Footer/FooterSocial';
import { FooterSocialRow } from '@curology/ui-components-web/react/Footer/FooterSocialRow';
import { FooterButton } from '@curology/ui-components-web/react/Footer/FooterButton';
import { FooterLogo } from '@curology/ui-components-web/react/Footer/FooterLogo';
import { FooterDetails } from '@curology/ui-components-web/react/Footer/FooterDetails';
import { FooterDetail } from '@curology/ui-components-web/react/Footer/FooterDetail';
import { Link } from '@curology/ui-components-web/react/Link';

<Footer mode="dark">
  <FooterBody>
    <FooterNav className="cur-max-w-[25rem]">
      <FooterNavColumn>
        <FooterLink href="/">Get Started</FooterLink>
        <FooterLink href="/">Why Curology</FooterLink>
        <FooterLink href="/">Guides</FooterLink>
        <FooterLink href="/">Our Story</FooterLink>
        <FooterLink href="/">Community</FooterLink>
      </FooterNavColumn>
      <FooterNavColumn>
        <FooterLink href="/">Support</FooterLink>
        <FooterLink href="/">Blog</FooterLink>
        <FooterLink href="/">Reviews</FooterLink>
        <FooterLink href="/">Careers</FooterLink>
        <FooterLink href="/">Contact Us</FooterLink>
      </FooterNavColumn>
    </FooterNav>
    <FooterSocial>
      <FooterSocialRow>
        <FooterButton as="a" href="/">
          Twitter
        </FooterButton>
        <FooterButton as="a" href="/">
          TikTok
        </FooterButton>
        <FooterButton as="a" href="/">
          Instagram
        </FooterButton>
      </FooterSocialRow>
      <FooterSocialRow>
        <FooterButton as="a" href="/">
          Facebook
        </FooterButton>
        <FooterButton as="a" href="/">
          YouTube
        </FooterButton>
        <FooterButton as="a" href="/">
          Pinterest
        </FooterButton>
      </FooterSocialRow>
    </FooterSocial>
    <FooterLogo href="/" />
  </FooterBody>
  <FooterDetails>
    <FooterDetail>
      <p>All Rights Reserved 2014-2023 Curology Inc.</p>
      <p>
        <Link href="/">Terms of Service</Link>
      </p>
      <p>
        <Link href="/">Privacy Notice</Link>
      </p>
    </FooterDetail>
    <FooterDetail>
      <p>
        <Link href="/">Do Not Sell My Personal Information</Link>
      </p>
      <p>
        <Link href="/">Curology Access Program</Link>
      </p>
    </FooterDetail>
    <FooterDetail className="cur-flex-1 cur-min-w-[12rem]">
      <p>▵Online reviews as of 12/03/2021*</p>
      <p>
        *Among 856 customers subscribed to Curology for 3+ months.
        Self-reported.
      </p>
    </FooterDetail>
  </FooterDetails>
</Footer>

Light Footer

By setting mode="light" on the Footer, it will render with a cream background.

import { Footer } from '@curology/ui-components-web/react/Footer';
import { FooterBody } from '@curology/ui-components-web/react/Footer/FooterBody';
import { FooterNav } from '@curology/ui-components-web/react/Footer/FooterNav';
import { FooterNavColumn } from '@curology/ui-components-web/react/Footer/FooterNavColumn';
import { FooterLink } from '@curology/ui-components-web/react/Footer/FooterLink';
import { FooterSocial } from '@curology/ui-components-web/react/Footer/FooterSocial';
import { FooterSocialRow } from '@curology/ui-components-web/react/Footer/FooterSocialRow';
import { FooterButton } from '@curology/ui-components-web/react/Footer/FooterButton';
import { FooterLogo } from '@curology/ui-components-web/react/Footer/FooterLogo';
import { FooterDetails } from '@curology/ui-components-web/react/Footer/FooterDetails';
import { FooterDetail } from '@curology/ui-components-web/react/Footer/FooterDetail';
import { Link } from '@curology/ui-components-web/react/Link';

<Footer mode="light">
  <FooterBody>
    <FooterNav className="cur-max-w-[25rem]">
      <FooterNavColumn>
        <FooterLink href="/">Get Started</FooterLink>
        <FooterLink href="/">Why Curology</FooterLink>
        <FooterLink href="/">Guides</FooterLink>
        <FooterLink href="/">Our Story</FooterLink>
        <FooterLink href="/">Community</FooterLink>
      </FooterNavColumn>
      <FooterNavColumn>
        <FooterLink href="/">Support</FooterLink>
        <FooterLink href="/">Blog</FooterLink>
        <FooterLink href="/">Reviews</FooterLink>
        <FooterLink href="/">Careers</FooterLink>
        <FooterLink href="/">Contact Us</FooterLink>
      </FooterNavColumn>
    </FooterNav>
    <FooterSocial>
      <FooterSocialRow>
        <FooterButton as="a" href="/">
          Twitter
        </FooterButton>
        <FooterButton as="a" href="/">
          TikTok
        </FooterButton>
        <FooterButton as="a" href="/">
          Instagram
        </FooterButton>
      </FooterSocialRow>
      <FooterSocialRow>
        <FooterButton as="a" href="/">
          Facebook
        </FooterButton>
        <FooterButton as="a" href="/">
          YouTube
        </FooterButton>
        <FooterButton as="a" href="/">
          Pinterest
        </FooterButton>
      </FooterSocialRow>
    </FooterSocial>
    <FooterLogo href="/" />
  </FooterBody>
  <FooterDetails>
    <FooterDetail>
      <p>All Rights Reserved 2014-2023 Curology Inc.</p>
      <p>
        <Link href="/">Terms of Service</Link>
      </p>
      <p>
        <Link href="/">Privacy Notice</Link>
      </p>
    </FooterDetail>
    <FooterDetail>
      <p>
        <Link href="/">Do Not Sell My Personal Information</Link>
      </p>
      <p>
        <Link href="/">Curology Access Program</Link>
      </p>
    </FooterDetail>
    <FooterDetail className="cur-flex-1 cur-min-w-[12rem]">
      <p>▵Online reviews as of 12/03/2021*</p>
      <p>
        *Among 856 customers subscribed to Curology for 3+ months.
        Self-reported.
      </p>
    </FooterDetail>
  </FooterDetails>
</Footer>

Props

FooterProps

Name	Type	Default Value	Required	Description
All attributes of a <div />
mode	"dark" | "light"	'dark'	No	Should the footer render wih light or dark mode? *