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

Appear Here's pattern library and styleguide

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

import css from './CondensedSpaceCard.css';

import LeftRight from '../../LeftRight/LeftRight';
import FittedImage from '../../FittedImage/FittedImage';

const CondensedSpaceCard = props => {
  const { href, images, name, price, priceFromLabel, priceUnit, className } = props;

  /* eslint-disable react/jsx-no-target-blank */
  return (
    <a href={href} className={cx(css.root, className)} title={name} target="_blank">
      <LeftRight
        primarySide="left"
        leftChildren={
          images.length > 0 && (
            <FittedImage className={css.image} src={images[0].src} alt={images[0].alt} />
          )
        }
        rightChildren={
          <div className={css.body}>
            <div className={css.name}>
              {priceFromLabel && <span className={css.priceFromLabel}>{priceFromLabel}</span>}
              <span className={css.price}>{price}</span>
              {'\u00a0'}
              <span className={css.priceUnit}>{priceUnit}</span>
            </div>
            <div className={css.name}>{name}</div>
          </div>
        }
      />
    </a>
  );
  /* eslint-enable react/jsx-no-target-blank */
};

CondensedSpaceCard.propTypes = {
  href: PropTypes.string,
  images: PropTypes.array,
  name: PropTypes.string,
  price: PropTypes.string,
  className: PropTypes.string,
  priceFromLabel: PropTypes.string,
  priceUnit: PropTypes.string,
};

CondensedSpaceCard.defaultProps = {
  images: [],
};

export default CondensedSpaceCard;