@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;