Ribbons Recipes
Ribbon recipes help you create decorative corner ribbons for cards, images, and other container elements.
- corner-ribbon: Creates a corner ribbon element that can be positioned at the top-left or top-right of a parent container. Includes configurable width, offset, colors, shadow, and text styling.
Usage
- Add a text element (span, div, etc.) inside the container where you want the ribbon
- Apply the
corner-ribbonrecipe to the element - Add the
data-ribbon-positionattribute with valuetop-leftortop-rightto position the ribbon
Available Variables
| Variable | Default | Description |
|---|---|---|
--ribbon-width | 300px | Width of the ribbon |
--ribbon-offset | to-rem(20px) | Offset from the corner |
--ribbon-background-color | var(--black, #000) | Background color |
--ribbon-text-color | var(--white, #fff) | Text color |
--ribbon-text-size | 1em | Font size |
--ribbon-shadow | 0 5px 10px #ccc | Box shadow |
--ribbon-padding | .5em 1em | Padding |
Position Attributes
data-ribbon-position="top-right"- Positions ribbon at top-right cornerdata-ribbon-position="top-left"- Positions ribbon at top-left corner