Listing cards Free

Featured corner ribbon

A diagonal "Featured" ribbon pinned to the top corner of a listing card. Pure CSS.

★ Featured

.ribbon-wrap {
  position: relative;
  overflow: hidden;
}
.ribbon-wrap .ribbon {
  position: absolute;
  top: 12px;
  right: -34px;
  transform: rotate(45deg);
  padding: 4px 40px;
  background: #e63946;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

Give the card wrapper the .ribbon-wrap class (it needs overflow: hidden), then add a child element with the .ribbon class containing your label text, such as “Featured”.

Notes

Both classes are generic placeholders you set in Elementor’s Advanced tab, not Voxel core selectors.
The wrapper must clip overflow or the ribbon tail will stick out past the card.
Change right and padding together if you resize the ribbon so it stays centred on the corner.