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

Appear Here's pattern library and styleguide

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import cx from 'classnames';
import { applyContainerQuery } from 'react-container-query';

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

const query = {
  [css.large]: {
    minWidth: 192,
  },
};

/* eslint-disable react/prefer-stateless-function */
class SpaceFeatureCard extends Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    price: PropTypes.string.isRequired,
    location: PropTypes.string,
    containerQuery: PropTypes.shape({
      [css.large]: PropTypes.bool,
    }),
    className: PropTypes.string,
  };

  render() {
    const {
      name,
      price,
      location,
      containerQuery,
      className,
      children: _children,
      ...rest
    } = this.props;

    const classes = cx(
      css.root,
      containerQuery,
      className,
    );


    return (
      <PictureCard {...rest} className={classes}>
        <div className={css.inner}>
          <span className={css.location}>
            { location }
          </span>
          <div className={css.bottom}>
            <div className={css.name}>
              { name }
            </div>
            <div className={css.price}>
              { price }
            </div>
          </div>
        </div>
      </PictureCard>
    );
  }
}
/* eslint-enable react/prefer-stateless-function */

export default applyContainerQuery(SpaceFeatureCard, query);