PageBanner

Installation

yarn add @berlitz/page-banner

Props

| Argument | Type | Required | Default | Notes | | -------------------- | ------ | -------- | ------- | ------------------------------------------------------------------------------ | | backgroundImageSrc | String | ✅ | | The image provided will automatically be resized and colorized for readability | | children | Node | | | Children will display below the banner text | | flipText | bool | | | Flip the order of the subtitle/title | | inverse | bool | | true | Use white text for a dark image overlay | | large | bool | | | A taller banner | | subtitle | String | | | | | title | String | ✅ | | | | topNavComponent | Node | | | | | small | bool | | | A shorter banner | | removeChildContainer | bool | | | Removes Col wrapping children if true | | noBanner | bool | | false | This will remove background image and show the top navigation in insolation

Usage

// TODO fill this in
import PageBanner from '@berlitz/page-banner'
import TopNav from '@berlitz/top-nav'

const MyApp = () => (
  <PageBanner
    title="Cool Page"
    subtitle="Some information about this page"
    backgroundImageSrc="http://www.coolimageurl.com/coolimage.jpg"
    topNavComponent={<TopNav {...topNavProps}>}
  />
)