Install and Usage

Demo!

To see the Header and Footer in action, first, clone the repository, and then run the demo!

npm install 
npm run demo

Install

Add formidable-landers as a dependency.

npm install formidable-landers --save

Import the desired components and any variables/settings if applicable.

import { Header, Footer } from "formidable-landers";

import { VictorySettings, VictoryTheme, Header, Footer } from "formidable-landers";

<Header />
<Footer />

Customize

Highly recommend taking a look at the demo as an example.

<Header /> props

children

By default, the children are links to the company’s Twitter & GitHub pages. By using className="default", the links will use the Formidable brand’s fonts and colors.

  <div className="default">
    <a href="https://twitter.com/FormidableLabs"
      dangerouslySetInnerHTML={{ __html: LOGO_TWITTER }}
    />
    <a href="https://github.com/FormidableLabs/"
      dangerouslySetInnerHTML={{ __html: LOGO_GITHUB }}
    />
  </div>`

padding

Defaults to 60px 0. The padding affects only the logo and the navigational links.

logoProject

This can be either text or an SVG logo, depending on the branding of the project.

const projectTextLogo = (
  <h1>
    <a href="/" style={styles.demoHeading}>
      Project
    </a>
  </h1>
);

const projectSVGLogo = (
  <a
    href="/"
    style={{display: "block", height: "50px"}}
    title="Project X"
    dangerouslySetInnerHTML={{__html: ProjectXLogo}}
  />
);

style

By default is empty. It will apply inline styles to the <header> parent wrapper.

styleBy

By default is empty. It will apply inline styles to the .formidableHeader-logos-oss-by element; typically only textIndent is added to optically align the word by with the project logo.

styleContainer

By default is empty. It will apply inline styles to the .formidableHeader-container element, which contains only the project logos and navigational links. The padding prop will override any padding CSS attribute set here. (sorry)

styleLogos

By default is empty. It will apply inline styles to the .formidableHeader-logos element, which contains the project logo, the word by, and the Formidable Open source logo.

theme

By default is dark, which has a dark space background image and white logo text and links. The only other option is the light theme, which has black text and links on a solid white background.