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.