Marketplace Tile Sample

by sberube

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="background">
  <p>
    Sample Only
  </p>
  <div class="tile grow">

    <div class="new_indicator">
      <label>
        NEW
      </label>
    </div>

    <div class="tile-body">


      <div class="header">
        HP Standard
      </div>
      <div class="logo">
        <div class="helper">

        </div>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1d/AmazonWebservices_Logo.svg/2000px-AmazonWebservices_Logo.svg.png">
      </div>
      <div class="metrics">
        <div class="rating">
          <span>
        <i class="fa fa-star active"></i>
        <i class="fa fa-star active"></i>
        <i class="fa fa-star active"></i>
        <i class="fa fa-star active"></i>
        <i class="fa fa-star"></i>
        </span>
        </div>
        <div class="downloads">
          100
          <i class="fa fa-download"></i>
        </div>
      </div>
      <div class="separator">

      </div>
      <div class="name maxlines1">
        Capsule Sequenced
      </div>
      <div class="version">
        Version 1.0.0
      </div>
      <div class="last_modified">
        Last Updated 2/16/2016
      </div>

      <div class="actions">
        <button>
          Install
        </button>

      </div>
    </div>
  </div>

  <div class="tile grow">
    <div class="tile-body">


      <div class="header">
        HP Standard
      </div>
      <div class="logo">
        <div class="helper">

        </div>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1d/AmazonWebservices_Logo.svg/2000px-AmazonWebservices_Logo.svg.png">
      </div>
      <div class="metrics">
        <div class="rating">
          <span>
        <i class="fa fa-star active"></i>
        <i class="fa fa-star"></i>
        <i class="fa fa-star"></i>
        <i class="fa fa-star"></i>
        <i class="fa fa-star"></i>
       ...

CSS

@font-face {
  font-family: "Metric";
  src: url("https://hpefonts.s3.amazonaws.com/MetricWeb-Regular.woff") format('woff');
}

@font-face {
  font-family: "Metric";
  src: url("https://hpefonts.s3.amazonaws.com/MetricWeb-Bold.woff") format('woff');
  font-weight: 700;
}

@font-face {
  font-family: "Metric";
  src: url("https://hpefonts.s3.amazonaws.com/MetricWeb-Semibold.woff") format('woff');
  font-weight: 600;
}

@font-face {
  font-family: "Metric";
  src: url("https://hpefonts.s3.amazonaws.com/MetricWeb-Light.woff") format('woff');
  font-weight: 100;
}

body {
  font-family: "Metric"
}

.grow {
  transition: all .2s ease-in-out;
}

.grow:hover {
  /* transform: perspective(1px) scale(1.05)  translate3d(0,0,0); */
  -webkit-box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.5);
}

.maxlines1 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.background {
  background-color: #eeeeee;
  width: 800px;
  height: 1000px;
  border: 1px solid red;
  padding: 20px;
}

.tile {
  margin: 15px;
  box-sizing: border-box;
  position: relative;
  width: 220px;
  height: 310px;
  float: left;
  background-color: white;
  border-radius: 2px;
  -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1);
}

.tile .tile-body {
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
}

.tile .new_indicator {
  height: 25px;
  width: 50px;
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #3baeda;
  color: white;
  font-size: 14px;
  text-align: center;
  font-weight: bold;
  -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1);
}

.tile .new_indicator label {
  display:...

JavaScript

// Ribbon Generator
//http://www.cssportal.com/css-ribbon-generator/