Ribbons
A ribbon is pinned to the top corner of its nearest positioned
ancestor. Cards are already positioned, so
.ribbon-wrapper works inside one as-is — on any
other element, add .position-relative to the
parent.
Keep labels short. The banner is clipped to the corner, so only
about 64px of it is readable at the default size —
roughly six characters. Step up to
.ribbon-lg or .ribbon-xl for longer
words.
Colors
primary
secondary
success
danger
warning
info
dark
Sizes
Default
Large
Extra large
Outside a card
Any positioned element
The wrapper only needs an ancestor with
position: relative. Add
.overflow-hidden as well when the parent is
rounded, so the banner is clipped to the corner radius.
Interactive ribbon
A ribbon can wrap a link. It inherits whatever contrast colour the utility picked, so the label stays readable in both colour modes.