react-toolbox
Version:
A set of complementary tools to ReactJS.
39 lines (32 loc) • 2.25 kB
Markdown
# Card
A [card](https://www.google.com/design/spec/components/cards.html) is a piece of paper with unique related data that serves as an entry point to more detailed information. For example, a card could contain a photo, text, and a link about a single subject.
<!-- example -->
```jsx
import Card from 'react-toolbox/card';
const actions = [
{ label: 'Play', icon: 'play-arrow'},
{ label: 'Close' }
];
const TestCards = () => (
<Card
image='http://pitchfork-cdn.s3.amazonaws.com/longform/221/Deerhunter-Fading-Frontier640.jpg'
text='A Deerhunter album rollout usually coincides with some pithy and provocative statements from Bradford Cox on pop culture...'
title='Deerhunter - Fading Frontier'
color="rgba(0,0,0,.4)"
actions={actions}
/>
);
```
## Properties
| Name | Type | Default | Description|
|:-----|:-----|:-----|:-----|
| `actions` | `Array` | | Array of objects describing actions. These actions will be rendered as buttons and the object fields will be transferred to those.|
| `className` | `String` | `''` | Sets a class to give customized styles to the card.|
| `color` | `String` | | Sets HEX or RGBA color to add a colored layer to the heading.|
| `image` | `String` | | URL to sets a background image in the heading.|
| `loading` | `Boolean` | `false` | If true, component will be disabled and showing a loading animation.|
| `onClick` | `Function` | | Callback function that is fired when the components's is clicked. It also will display a ripple effect on click. |
| `subtitle` | `String` | | Sets a complementary smaller text under the title.|
| `text` | `String` | | Sets a complementary text display as a card description.|
| `title` | `String` | | Sets the title of the card.|
| `type` | `String` | `default` | Type of the component to display general modifications. It can be `wide` for a larger card, `image` if it's an image card or `event` which shows just a title on top. |