<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<article class="coffee-card">
  <div class="coffee-head">
    <b>
      BEAN HOUSE
    </b>
    <span>
      ORDER #084
    </span>
  </div>
  <p>
    Oat latte
    <i>
      €4.20
    </i>
  </p>
  <p>
    Cinnamon bun
    <i>
      €3.80
    </i>
  </p>
  <div class="coffee-total">
    TOTAL
    <b>
      €8.00
    </b>
  </div>
  <small>
    Made with care · 09:17
  </small>
</article>

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

.coffee-card{width:225px;padding:18px;border-radius:3px;background:repeating-linear-gradient(0deg,#fffaf0 0 22px,#f7f0e4 23px);color:#4e372d;font-family:monospace;box-shadow:5px 8px 16px #624a3b26}.coffee-head{padding-bottom:12px;border-bottom:1px dashed #b69c8b;text-align:center}.coffee-head b{display:block;font-size:17px;letter-spacing:1px}.coffee-head span{font-size:9px;color:#a17d69}.coffee-card p{margin:11px 0;font-size:12px}.coffee-card p i{float:right;font-style:normal}.coffee-total{margin-top:14px;padding:10px 0;border-top:2px solid #4e372d;border-bottom:2px solid #4e372d;font-weight:800}.coffee-total b{float:right;color:#bd654e}.coffee-card small{display:block;margin-top:12px;text-align:center;color:#a17d69;font-size:9px}