@appearhere/bloom/components/Cards/PictureCard/PictureCard.js

Appear Here's pattern library and styleguide

import PropTypes from 'prop-types';
import React from 'react';
import cx from 'classnames';

import css from './PictureCard.css';
import Card from '../Card/Card';

const PictureCard = props => {
  const { src, href, children, className, center, style, overlayClassName, ...rest } = props;

  return (
    <Card
      {...rest}
      href={href}
      className={cx(css.root, className, href ? css.link : null, center ? css.center : null)}
      style={{
        ...style,
        backgroundImage: `url(${src})`,
      }}
    >
      <div className={cx(css.overlay, overlayClassName)} />
      <div className={css.inner}>{children}</div>
    </Card>
  );
};

PictureCard.propTypes = {
  src: PropTypes.string.isRequired,
  href: PropTypes.string,
  children: PropTypes.node,
  className: PropTypes.string,
  innerClassName: PropTypes.string,
  center: PropTypes.bool,
  style: PropTypes.object,
  overlayClassName: PropTypes.string,
};

export default PictureCard;