Improve this doc View source

# `pfCard - Timeframe Filters`
directive in module `patternfly.card`

## Description

Directive for easily displaying a card with html content

## Usage

as attribute

    <ANY pf-card - -timeframe -filters
         head-title="{string}"
         [sub-title="{string}"]
         [show-top-border="{boolean}"]
         [show-titles-separator="{boolean}"]
         [footer="{object}"]
         [filter="{object}"]>
       ...
    </ANY>

#### Parameters

Param | Type | Details
--- | --- | ---
headTitle | string | Title for the card
subTitle (optional) | string | Sub-Title for the card
showTopBorder (optional) | boolean | Show/Hide the blue top border. True shows top border, false (default) hides top border
showTitlesSeparator (optional) | boolean | Show/Hide the grey line between the title and sub-title. True (default) shows the line, false hides the line

footer
(optional)

object

footer configuration properties:

- .iconClass - (optional) the icon to show on the bottom left of the footer panel

- .text - (optional) the text to show on the bottom left of the footer panel, to the right of the icon

- .href - (optional) the href link to navigate to when the footer href is clicked

- .callBackFn - (optional) user defined function to call when the footer href is clicked

*Note: If a href link and a callBackFn are specified, the href link will be called

filter
(optional)

object

filter configuration properties:

- .filters - drop down items for the filter.

       Ex:  'filters' : [{label:'Last 30 Days', value:'30'},
                         {label:'Last 15 Days', value:'15'},
                         {label:'Today', value:'today'}]

- .defaultFilter - integer, 0 based index into the filters array
- .callBackFn - user defined function to call when a filter is selected

## Example

#### Source

#### Demo