Styling and performance

The components come unstyled apart from a few layout essentials, with a stable class on every element so your site's CSS can make them its own. This page lists every class hook, explains the inline styles, and covers what keeps listing pages fast.

Class hooks

Every component also accepts a className, added next to its root class.

ListingCard and ListingGrid

The price and status sit inside the photo frame, which is position: relative, so you can place them over the photo:

.re-listing-card__price {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-weight: 600;
}

ListingDetail

ListingGallery

ListingFilters

ListingPagination

IdxAttribution and ListingInquiryForm

Overriding inline styles

A handful of layout essentials are inline styles, so the components look reasonable before you've written any CSS:

The kit never uses !important, so everything else is yours. Inline styles do win over class rules, though, so to change one of the properties above, either mark your rule !important:

.re-listing-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
}

or skip the component that sets it. For a different grid, map ListingCard inside your own container (see Cards and grids).

Focus styles

The gallery takes keyboard focus so the arrow keys work. It shows the browser's own focus ring when it's focused from the keyboard, and not after a mouse click. The kit doesn't set an outline on it, so a plain class rule restyles the ring, no !important needed:

.re-gallery:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 4px;
  border-radius: 0.5rem;
}

Keep a visible style there, and on the gallery's buttons and thumbnails, so keyboard users can always see where they are. Don't set outline: none without a replacement.

Performance

Listing pages should render on the server and paint fast on a phone. The kit is built for that; these are the things to keep in mind.

• Almost everything renders on the server. The root and /server entry points ship no client JavaScript. A listing page's only client code is the gallery, the inquiry form and the view tracker (which renders nothing).
• Keep the tracker a childless sibling. ListingViewTracker returns null and never wraps content. Don't put page content inside it, or inside any provider: wrapping the page in a client component turns a prerendered page into a client-rendered one.
• Pass client components only what they read. Props sent to ListingGallery and ListingInquiryForm travel to the browser with the page. Give the form its four listing fields, not the whole listing (see Inquiry forms).
• Photos are plain <img> tags from the MLS's image host. Cards and thumbnails load lazily. ListingDetail loads its first photo eagerly and the rest lazily, and the gallery's main photo loads eagerly.
• Don't animate the first photo in. The top photo is usually the largest thing on screen when the page loads. Leave it visible from the first paint, with no fade or slide-in, and save entrance animations for content further down.
• Check the HTML. After a build, curl a listing page and confirm the address, price and card markup are in the response. If you only see a script payload, something above the listing content has become a client component.