VoxelKit
← Back to library
Listing cards Free

Price badge on cards

Turn a plain price value into a clean pill badge on listing cards, with a muted per-unit suffix.

€1,450−15%
.price-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  font-weight: 600;
  line-height: 1;
}
.price-badge .unit {
  font-size: .75em;
  font-weight: 500;
  opacity: .6;
}

Wrap your dynamic price value in a .price-badge element (add the class to the price text container in Elementor), and put the “/night” or “/hr” text in a child .unit span.

Notes

  • .price-badge is a generic placeholder class — set it in the Elementor element’s Advanced tab, not a Voxel core selector.
  • The pill uses a translucent background so it adapts to light and dark card styles.
  • Drop the .unit span if you do not show a per-unit suffix.