<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<article class="trail-card">
  <small>
    CURRENT BOOK
  </small>
  <h3>
    The long way home
  </h3>
  <div class="trail-path">
    <i>
    </i>
    <i>
    </i>
    <i>
    </i>
    <i>
    </i>
  </div>
  <p>
    Chapter 7 of 12
    <b>
      61%
    </b>
  </p>
</article>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.trail-card{width:245px;padding:18px;border-radius:16px;background:#fbf7ef;color:#30394b;font-family:Arial;border:1px solid #dfd5c3}.trail-card small{font-size:9px;font-weight:800;letter-spacing:1px;color:#b07b58}.trail-card h3{margin:8px 0 18px;font-size:20px}.trail-path{position:relative;height:42px;border-bottom:3px dashed #cfc0a8}.trail-path i{position:absolute;bottom:-8px;width:13px;height:13px;border:3px solid #fbf7ef;border-radius:50%;background:#8ea3db}.trail-path i:nth-child(1){left:4px}.trail-path i:nth-child(2){left:31%;bottom:11px;background:#d8917e}.trail-path i:nth-child(3){left:60%;bottom:1px;background:#e5bb71}.trail-path i:nth-child(4){right:4px;background:#6ba894}.trail-card p{margin:17px 0 0;font-size:11px;color:#7b8392}.trail-card p b{float:right;color:#526ec8}