2.2 KiB
2.2 KiB
Card
A card 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.
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. |