Labs

This is the combo for a project intended to be used in the "Tools & Resources" section of the "Labs" page.

Project Name

A short description about the project.

<div class="u-flex">
  <div class="Thumbnail Thumbnail--circle u-flexAlignSelfStart">
    <img src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%3E%3Crect%20fill%3D%22%23ddd%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%235d5d5d%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%20dy%3D%225%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3E64%20%26%23215%3B%2064%3C%2Ftext%3E%3C%2Fsvg%3E"
     alt="">
  </div>
  <div class="u-spaceLeft u-flex u-flexCol u-flexGrow1">
    <h3 class="u-textGrow1">Project Name</h3>
    <p class="u-md-padRight">A short description about the project.
    </p>
    <ul class="u-listInline u-padTop01 u-flexExpandTop">
      <li><a href="#">Demo</a></li>
      <li><a href="#">Article</a></li>
      <li><a href="#">Source</a></li>
    </ul>
  </div>
</div>

This is the combo for a Code Pen preview intended to be used in the "Experiments" section of the "Labs" page.

<a href="http://codepen.io/tylersticka/pen/mewaqW" class="u-linkBlock u-textInheritColor">
  <div class="Thumbnail u-block u-pullSides1 u-sm-spaceSidesNone u-sm-borderRadius">
    <img class="u-sizeFull" src="http://codepen.io/tylersticka/pen/mewaqW/image/small.png"
     alt="">
  </div>
  <h4 class="u-linkTarget u-spaceTop01 u-sm-padRight">
    Profile Header
  </h4>
  <p>
    <span class="u-textShrink1">By Tyler Sticka</span>
  </p>
</a>