Ribbon Banner
<div style="position:relative;max-width:280px;padding:24px;background:#1e293b;border-radius:16px;border:1px solid rgba(255,255,255,0.1);color:#fff;overflow:hidden"><div style="position:absolute;top:16px;right:-35px;background:linear-gradient(90deg,#ef4444,#f97316);color:#fff;padding:4px 40px;font-size:0.75em;font-weight:bold;transform:rotate(45deg);box-shadow:0 2px 8px rgba(0,0,0,0.3)">NEW</div><h3 style="margin:0 0 8px;font-size:1.1em">Featured Item</h3><p style="margin:0;opacity:0.6;font-size:0.85em">A card with a corner ribbon banner.</p></div>Customize
#ef4444
#f97316
px
Props
| Name | Type | Default | Description |
|---|---|---|---|
text | text | NEW | Displayed text |
ribbonColor1 | color | #ef4444 | Ribbon gradient start |
ribbonColor2 | color | #f97316 | Ribbon gradient end |
borderRadius | slider (px) | 16px | Corner roundness |
Corner ribbon badge for cards