Hello World
Default
By default, FlexCard displays the contents of the children in a card.
<FlexCard>...</FlexCard>
With NavItem
Insert a title that is a link, combined with content.
<FlexCard title={{ name: 'Hello', href: '#' }}>...</FlexCard>
Hello
This is the content
With Badges
List of badges that are links
<FlexCard badges={[{ name: 'Category', href: '#' }]}>...</FlexCard>
With Colorscheme for Badges
The badges can have a specific colour scheme.
<FlexCard badges={[{ name: 'Category', href: '#' }]} colorScheme="...">...</FlexCard>
With foreground colour
You can specify a colour for the title.
<FlexCard title="..." color="color">...</FlexCard>
Hello
This is the content
With background colour
You can specify a background colour.
<FlexCard bg="color">...</FlexCard>
Building a web site
You can put any content in a flexible header.
With image on top
If you supply an image, the header will show it on top of the card by default (can be changed).
<FlexCard image="...">...</FlexCard>
Hello
This is the content
With image in middle
You can have the image in the middle.
<FlexCard image="..." imagePos="middle">...</FlexCard>
With image in bottom
You can have the image in the bottom.
<FlexCard image="..." imagePos="bottom">...</FlexCard>
Hello
This is the content
Full example
With title, badges, image and content.
<FlexCard ...>...</FlexCard>