← All elements
<article class="pc-ribbon-card">
<span class="pc-ribbon">-30%</span>
<div class="pc-ribbon-card__img"></div>
<h3>Wool Beanie</h3>
<p>₱890</p>
</article>About this card
A product card with a diagonal sale ribbon wrapped around its corner, made from one rotated element and clipped by overflow. Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.