React

by Pratik Galoria

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<div id="app"></div>

SCSS

@import url(https://fonts.googleapis.com/css?family=Krub);
$font-krub: 'Krub';
$color-solitude: #e2e4ea;
$color-up: #109e58;

body {
  background: #a3b6c1;
  padding: 20px;
  font-family: $font-krub;
  
  > div {
    display: flex;
  }
}

.up {
  color: $color-up;
}

.container {
  display: flex;
  flex-flow: column wrap;
  flex: 1 1 auto;
}

.card {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 2px #666;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  padding: 10px;
  margin-bottom: 10px;
  
  > div {
    display: flex;
    flex: 1 1 auto;
  }
  
  .header {
    align-items: center;
    
    .title {
      color: #999;
      flex: 1 0 auto;
      font: 700 13px/1.2 $font-krub;
    }
    .actions {
      font: 700 12px/1.2 $font-krub;
    }
  }
  
  .content {
    align-items: flex-end;
    flex: 1 0 auto;
    margin-top: 10px;
    
    .value {
      color: #1f3044;
      flex: 1 0 auto;
      font: 700 20px/1.2 $font-krub;
    }
  }
  
  .footer {
    align-items: center;
    display: flex;
    margin-top: 10px;
    
    .bar {
      background-color: #515a67;
      height: 5px;
      
      &.left {
        border-radius: 4px 0 0 4px;
        background-color: #2aa287;
        flex: 1 0 70%;
      }
      &.right {
        border-radius: 0 4px 4px 0;
        flex: 0 0 30%;
      }
    }
  }
}

React

class Card extends React.Component {
  constructor(props) {
    super(props);
  }
  
  render() {
  	const {title, value, arrow, short, bar} = this.props;
    
    return (
      <div class="container">
        <div class="card">
          <div class="header">
            <div class="title">{title}</div>
            <div class="actions up">{short}</div>
          </div>
          <div class="content">
            <div class="value">{value}</div>
            <div class="actions"><i class="fas fa-long-arrow-alt-up up"></i></div>
          </div>
          { bar && (
            <div class="footer">
              <div class="bar left"></div>
              <div class="bar right"></div>
            </div>
          )}
        </div>
        <div class="card">
          <div class="header">
            <div class="title">{title}</div>
            <div class="actions up">{short}</div>
          </div>
          <div class="content">
            <div class="value">{value}</div>
            <div class="actions"><i class="fas fa-long-arrow-alt-up up"></i></div>
          </div>
          { bar && (
            <div class="footer">
              <div class="bar left"></div>
              <div class="bar right"></div>
            </div>
          )}
        </div>
      </div>
    )
  }
}

ReactDOM.render(<Card title="Algorithm" value="3502.79" short="+6.7%" arrow="up" bar={70}/>, document.querySelector("#app"))