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>
Hello
This is the content
With Category Badges
Insert a a list of category badges.
<FlexHeader title={{ name: 'Hello', href: '#' }} categories={[...]}>...</FlexHeader>
Hello
This is the content
With foreground colour
You can specify a colour for the title.
<FlexHeader title="..." color="color">...</FlexHeader>
Hello
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
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
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>
Building a web site
You can put any content in a flexible header