Corner Ribbons: "New", "Sale" and "Popular" (SCSS)
Adds classes that put a diagonal corner ribbon on any block (wpide-ribbon-new, wpide-ribbon-sale, wpide-ribbon-popular), handy for pricing columns and product cards.
Opens WPIDE on
Code
$ribbons: (
new: ("New", #16a34a),
sale: ("Sale", #dc2626),
popular: ("Most popular", #7c3aed),
);
[class*="wpide-ribbon-"] {
position: relative;
overflow: hidden;
}
@each $name, $ribbon in $ribbons {
.wpide-ribbon-#{$name}::after {
content: nth($ribbon, 1);
position: absolute;
top: 22px;
right: -46px;
width: 170px;
padding: 5px 0;
transform: rotate(45deg);
background: nth($ribbon, 2);
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
text-align: center;
text-transform: uppercase;
box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
pointer-events: none;
}
}Notes
Add the class to a Group or Column block. Add your own ribbons to the $ribbons map.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.