# FancyCard

## Props

- ***headerTitle***: string: Sets the header's title.
- ***headerSubtitle***: string: Sets the header's subtitle.
- ***headerStatus***: string: Sets the header's status (primary, success, alert etc...)
- ***headerStatusBarText***: string: Set the header's status bar text.
- ***onHeaderStatusBarClick***: func: Define a custom onClick function for the header's status bar (default is hideHeaderStatusBar())
- ***customHeader***: any: Define a custom header for the FancyCard, which will be rendered instead of the standard header.
- ***direction*** string: Define the direction for the slide transition animation (up, down, left, right)
- ***depth*** number: define the zDepth of the FancyCard.

## Methods

- ***toggleHeaderStatusBar()***: Toggles the header's status bar.
- ***showHeaderStatusBar()***: Shows the header's status bar.
- ***hideHeaderStatusBar()***: Hides the header's status bar.



## JSX Usage

*** FancyCard with standard header ***

```
<FancyCard
    headerTitle="I am a FancyCard title."
    headerSubtitle="I am a FancyCard subtitle."
    headerStatus="primary"
    headerStatusBarText="I am a FancyCard status bar."
    direction="up"
    ref="fancyCard"  >

    FancyCard body text goes here! Woot!

</FancyCard>

```
*Change the state, to trigger animation* 

```
this.refs.fancyCard.setState({
    headerTitle: "New FancyCard title"
    headerSubtitle: "New FancyCard subtitle"
});

```

*** FancyCard with custom header ***

```
let customHeader = [
    <Container key={1} flexDirection="row">
        <Block width={1} padded={true}>
            <h1 className="lui-font-style-subehead-1">Hello I am a FancyCard custom header!</h1>
            <h1 className="lui-font-style-subhead-1">I can be passed along instead of the stanard header!</h1>
        </Block>
    </Container>
];

<FancyCard
    customHeader={customHeader}
    headerStatus="primary"
    headerStatusBarText="I am a FancyCard status bar."
    direction="up"
    ref="fancyCard"  >

    FancyCard body text goes here! Woot!

</FancyCard>

```