Skip to main content

Listing Card

The listing card is a component that serves many RealtyVis Blocks, including the Listing search and Featured listings.

Default listing card

CSS Classes​

The default listing card has the following CSS classes available for styling:

CSS
  • rv-listingCard
    • rv-listingCard-image
      • rv-listingCard-badges
        • rv-attributeBadge-featured
        • rv-attributeBadge-openHouse
        • rv-attributeBadge-virtualTour
        • rv-attributeBadge-sold
    • rv-listingCard-body
      • rv-listingLabel-propertyType
      • rv-listingLabel-price
      • rv-listingLabel-fullAddress
        • rv-listingLabel-address
        • rv-listingLabel-cityRegion
      • rv-listingCard-amenities
      • rv-listingLabel-attribution
        • rv-listingLabel-office
        • rv-listingLabel-mlsNumber

By applying styling to each class, it is possible to create a unique look and feel for your listing searches. Following are some examples of customizations.

Example​

Example 1

Settings
FieldValue
Appearances > Font > Font familyJost
Appearances > Font > Font size14px
Appearances > Card Style > Overlay listing card on photoYes
.rv-attributeBadge {
  text-transform: uppercase !important;  
  color: white !important;
  background-color: gray !important;
}
tip

Using !important to set CSS rules makes styling easier and ensures your CSS rules maintains its CSS Specificity in future product updates.