Large List

by JamesKyle

HTML

<div class="row">
    <div class="col-12">
        <ol class="large-list">
            
            <!-- -->
            <li>
                <a href="#">
                    <div class="row">
                        <div class="col-3">
                            <img src="http://placehold.it/200x200" />
                        </div>
                        <div class="col-6">
                            <h3>John D.</h3>
                        </div>
                        <div class="col-3 shift-right">
                            <ul>
                                <li>$59/hr</li>
                                <li>Basketball</li>
                                <li>Boston, MA</li>
                                <li>1.7mi away</li>
                            </ul>
                        </div>
                        <div class="col-6">
                            <p>Sartorial iphone master cleanse bicycle rights, single-origin coffee semiotics vinyl +1</p>
                        </div>
                        <div class="col-3 shift-right">
                            <button>View Profile</button>
                        </div>
                    </div>
                </a>
            </li>
            <!-- -->
            
        </ol>
    </div>
</div>

CSS

/* DEBUG */
xxx *:hover {
  outline: 1px solid #f00;
  outline-offset: -1px;
}
/* BASELINE */
html {
  font-size: 87.5%;
}
body {
  position: relative;
  top: 0;
  bottom: 0;
  min-height: 100%;
  left: 0;
  right: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  font-size: 1em;
  line-height: 1.5em;
  font-family: "Proxima-Nova-Regular", "ProximaNova-Regular", "Proxima Nova Regular", "ProximaNova Regular", "Proxima Nova", "proxima-nova", "Proxima Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: subpixel-antialiased;
  -khtml-font-smoothing: subpixel-antialiased;
  -moz-font-smoothing: subpixel-antialiased;
  -ms-font-smoothing: subpixel-antialiased;
  -o-font-smoothing: subpixel-antialiased;
  font-smoothing: subpixel-antialiased;
  opacity: 0.999999;
  -webkit-transform: translate3d(0, 0, 0);
}
.font-face.wf-proximanova-i7-active.wf-proximanova-i4-active.wf-proximanova-n4-active.wf-proximanova-n7-active.wf-proximanova-n1-active.wf-proximanova-n3-active.wf-proximanova-n9-active body {
  font-family: "proxima-nova";
}
/* SCAFFOLDING */
* {
  -webkit-box-sizing: border-box;
  -khtml-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
.row {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  *zoom: 1;
}
.row::before,
.row::after {
  content: "";
  display: table;
}
.row::after {
  clear: both;
}
.row .row {
  width: auto;
  max-width: none;
  min-width: 0;
}
.row .row.collapse {
  margin: 0;
}
.row .row.collapse [class|="col"],
.row .row.collapse [class|="span"] {
  padding: 0;
}
[class|="col"],
[class|="span"] {
  position: relative;
  float: left;
  min-height: 1px;
  margin: 0;
}
[class|="col"].centered,
[class|="span"].centered {
  float: none;
  margin: 0 auto;
}
[class|="col"] + [class|="col"]:last-child,
[class|="span"] +...