Flexible Header

The FlexHeader component has different customisable looks based on optional props.

Header Image

Default

By default, FlexHeader displays the current page name in a hero header.

<FlexHeader />

flexheader


With Contents

If you put something in the body, it is will be displayed instead of the page name.

<FlexHeader>...</FlexHeader>

Building a web site

You can put any content in a flexible header.


With NavItem

Insert a title that is a link, combined with content.

<FlexHeader title={{ name: 'Hello', href: '#' }}>...</FlexHeader>

This is the content


With Category Badges

Insert a a list of category badges.

<FlexHeader title={{ name: 'Hello', href: '#' }} categories={[...]}>...</FlexHeader>

FashionTechnique

This is the content


With foreground colour

You can specify a colour for the title.

<FlexHeader title="..." color="color">...</FlexHeader>

This is the content


With background colour

You can specify a background colour.

<FlexHeader bg="color">...</FlexHeader>

Building a web site

You can put any content in a flexible header.


With image

If you supply an image, the header will show it to the right of content by default.

<FlexHeader image="...">...</FlexHeader>

Building a web site

You can put any content in a flexible header

Header Image

Flip

You can also have the image on the left.

<FlexHeader image="..." flip>...</FlexHeader>

Building a web site

You can put any content in a flexible header

Header Image

Background image

You can also have the image in the background.

<FlexHeader bgImage="url(...)">...</FlexHeader>

Building a web site

You can put any content in a flexible header


Background and image!

Why not have both?

<FlexHeader image="..." bgImage="url(...)"><Text>...</Text></FlexHeader>

FashionTechnique

Building a web site

You can put any content in a flexible header

Header Image