New
BadgesStatus Badge Set
Success, warning, danger and info badges - a coloured dot beside a word that carries the meaning on its own.
#badge#status#dot
5 frameworksBeginner
Loading…
A 45° ribbon across a card corner, built from one rotated span and one equation.
<!--
The geometry is one equation: the band's centre must sit at equal distances
from the corner on both axes, or the 45° rotation drifts off the diagonal.
Here: width 160px → half 80; right -48px puts the centre 32px in from the
right edge; top 20px + half the 24px band height puts it 32px down. 32 = 32.
Change one number and you must change its partner.
-->
<div class="ribbon-card">
<span class="ribbon-card__ribbon">New</span>
<h3 class="ribbon-card__title">Team workspace</h3>
<p class="ribbon-card__copy">Shared views, granular roles and an audit trail for every change.</p>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
label | string | 'New' | Accessible label announced while loading. |
childrenrequired | ReactNode | - | Content rendered inside the component. |
className | string | - | Additional classes merged onto the root element. |
The geometry is a single constraint: the band’s centre must sit at equal distances from the corner on both axes, or the 45° rotation drifts off the diagonal. With `w-40` (160px) the half-width is 80, so `right-[-48px]` centres the band 32px in from the edge, and `top-[20px]` plus half the ~24px band height puts it 32px down - 32 equals 32. Change one number and you must change its partner. The wrapper adds only `relative overflow-hidden` (the clipping is what trims the band ends into a wedge); the card border, radius and padding are yours to supply via `className`, so the ribbon drapes over any card you already have. Keep the label to one short word and pad the card’s top-right content (`pr-14`) so headings do not run underneath.