npm
Banners

CornerRibbon

Rotated sale badge pinned to a card corner.

−50%
King's Coffer
<div style={{ position: "relative" }}>
  <CornerRibbon><Ribbon size="small">−50%</Ribbon></CornerRibbon>
  <Panel tone="paper">…</Panel>
</div>

Rotated sale/“popular” badge pinned to a card's top-right corner. Wrap the card in a relative container; the badge sits above the panel contour.