Car Card Search List

by gbos

HTML

<div id="app"></div>

SCSS

body {
    background: lightgrey;
    font-family: Helvetica;
    padding: 20px;
    font-size: 14px;
}

.rc-CarCardDesktop {
    color: #555a60;

    background-color: white;
    min-height: 264px;
    display: flex;
    flex-direction: row;
    .main {
        flex: 1 1 auto;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        h3 {
            font-size: 129%;
            text-transform: uppercase;
        }
        h4 {
            font-size: 100%;
            color: #97999b;
            font-weight: bold;
        }
        .cols {
            flex: 0 0 156px;
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            flex-direction: row;
            .thumbnail {
                flex: 0 0 226px;
                background-image: url("https://via.placeholder.com/300.png/09f/fff");
                background-size: cover;
                position: relative;
                
                .damaged-icon {
                    display: inline-block;
                    position: absolute;
                    top: 0;
                    left: 0;
                    padding: 6px 10px;
                    background-color: orange;
                    color: white;
                }
                .pictures-count-icon {
                    background-color: rgba(85, 90, 96, 0.87);
                    color: white;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    padding: 3px 5px;
                }
            }
            .details {
                flex: 1 1 25%;
                //border: 1px solid grey;
                padding: 0 15px;
                label {
                    font-weight: bold;
                    display: block;
                }
                span {
                    display: block;
                    &.strong {
                       ...

React

const CarCardDesktop = ({car}) => {

	return <section className="rc-CarCardDesktop">
    	  
        <div className="main">
          
          <h3 className="title"> Audi A1 1.6 TDI (2010) Attraction - Diesel - Manual - 118.000 km </h3>    
          
          <h4>Dynamic auction</h4>
          
          <div className="cols">
            
            
            <div className="thumbnail">
                
                <span className="damaged-icon">DAMAGED</span>
                <span className="pictures-count-icon">logo 14</span>
                
                
                
                
                
            </div>
            
            <div className="details">
              <label>Time left</label>
              <span className="strong">1d 5h</span>
              
              <span className="data">11/04/2005</span>
              <span className="data">Hatchback</span>
              
              
            </div>
            
            <div className="details">
              <label>Current price</label>
              <span className="strong">€3.200</span>

              <span className="data">99g/km (EU4)</span>
              <span className="data">VAT non deduct.</span>

            </div>
            
            <div className="details">
              <label>Buy now</label>
              <span className="strong">€3.200</span>
              
              <span className="data">96 kw (131 hp)</span>
              <span className="data">Belgien</span>
              
            </div>
            
            
          </div>
          
          
        </div>
        
        <div className="detail-arrow"> &gt; </div>
        
        
        
        
      
    
	</section>;

}










ReactDOM.render(<CarCardDesktop />, document.querySelector("#app"))