Clip Card

This is a wrapper for the material-ui Card component, with the additional option to set a CardHeader with title, subtitle and an action.

If you want to style the children CardHeader and CardContent, you can use the following properties within the classes prop (You'll need to create the Card using withStyles):

• headerRoot: Forwarded to CardHeader.props.classes.root, default styles:
  • padding: ${theme.spacing.unit}px ${theme.spacing.unit * 3}px.
  • borderBottom: 1px solid ${theme.palette.grey['300']}.
• headerAction: Forwarded to CardHeader.props.classes.action, default styles:
  • alignSelf: auto.
  • marginTop: 0.
• headerContent: Forwarded to CardHeader.props.classes.content.
• headerTitle: Forwarded to CardHeader.props.classes.title.
• headerSubheader: Forwarded to CardHeader.props.classes.subheader.
• contentRoot: Forwarded to CardContent.props.classes.root, default styles:
  • padding: theme.spacing.unit * 3.

Installation

npm install @clipmx/card --save

Usage

import React from 'react';
import Card from '@clipmx/card';

// The only required prop is the `children` (card content), all others are optional, you could even have a card with content and just that. If you want the card header to appear, you need to provide the `title` prop at least.

const MyComponent = () => (
    <Card
      title="Title"
      subtitle="Subtitle"
      action={
        <div>
          <span>The action</span>
          <IconButton onClick={action('onClick')}>
            <PlayArrow />
          </IconButton>
        </div>
      }
    >
    <div>
      <h3>Some card content h3</h3>
      <p>Some custom paragraph here</p>
      <img src="some-image-source.png" >
    </div>
    </Card>
);

export default MyComponent;

Props

This is a wrapper of the Material-UI card, so you can use any props that Material-UI supports for that component, but the specific for this wrapper are:

• action: PropTypes.node
• children: PropTypes.node.isRequired, // The card content
• classes: PropTypes.shape({})
• title: PropTypes.string
• subtitle: PropTypes.string