card.jsx

import React, {PropTypes} from 'react';
import classnames from 'classnames';
import utilityClasses from './utilityClasses';

const Card = ({children, utilityClasses}) => { // how do we grab utility props, i.e. `boxShadow`, `paddingTop`, etc?

    utilityClasses = {
        ...utilityClasses, // probably returns mostly false, except for some defaults?
        'padding-all': 2,
    }

    let cardClassNames = classnames({
        
        ...utilityClasses,
        ...this.props.classname
    });

    return (
        <div className={ cardClassNames }>
            <CardHeader marginBottom="2">
                {this.props.header}
            </CardHeader>
            
            {children}
            
            <CardFooter marginTop="2">
                {this.props.footer}
            </CardFooter>
        </div>
    );

};

Card.displayName = 'Card';

Card.propTypes = {
};

export default Card;

example.jsx

<!-- JSX -->
<Card header="Title" footer="Social Stuff" boxShadow="2" paddingTop="1">
    This is a default card component, with the exception that this specific instance has a box-shadow depth of 2!
    
    <Button fullWidth value="Push Me" />
</Card>

<!-- Would the above be better off just doing the following? -->
<Card header="Title" footer="Social Stuff" className="v-bs-2 u-pt-1">
    This is a default card component, with the exception that this specific instance has a box-shadow depth of 2!
    
    <Button fullWidth value="Push Me" />
</Card>

<!-- Output -->
<div class="u-pa-2 v-bs-2 u-pt-1">
    ...
    
    <button class="u-wf" />
</div>