# 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.

- Type: SCSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: ribbon, badge, pricing, scss
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-corner-ribbons-scss/

## Code

```scss
$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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Corner Ribbons: "New", "Sale" and "Popular" (SCSS)" in its snippet library and add it in one click; or create a new SCSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/