@berlitz/page-banner

PageBanner component for the Max Design System

Usage no npm install needed!

<script type="module">
  import berlitzPageBanner from 'https://cdn.skypack.dev/@berlitz/page-banner';
</script>

README

PageBanner npm version

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}>}
  />
)