Listing card

Editorial real-estate listing card. All data comes from props. The ready state shows the localized property type, title, location, price, and the first four features. The loading state is a skeleton without links or invented listing data.

Bereit

Ab einer Containerbreite von 40rem liegen Foto und Text nebeneinander.

Haus

Atelier Maris

41 Passage des Glycines, 13260 Cassis

1.860.000,00 € Kaufpreis

Schlafzimmer 4
Bäder 3
Wohnfläche 186 m²
Grundstück 920 m²

Dieses Inserat ansehen

Bereit, schmaler Container

Dasselbe Inserat unter einer Containerbreite von 40rem. Die Karte wird untereinander angeordnet.

Haus

Atelier Maris

41 Passage des Glycines, 13260 Cassis

1.860.000,00 € Kaufpreis

Schlafzimmer 4
Bäder 3
Wohnfläche 186 m²
Grundstück 920 m²

Dieses Inserat ansehen

Ladezustand

Ein Gerüst ohne Titel, Preis, Foto oder Link.

Eigenschaften

Kategorie: Inseratskarte
Zugang: Kostenlos
Gestaltung: Modern luxury real estate
Layout: Container-responsive article: stacked below a 40rem container width and horizontal from 40rem. The image area keeps a 4:3 ratio.
React: >=18.2 <20
Tailwind: >=4
Darstellung: Server-capable function component. No client directive.

Installation

pnpm dlx shadcn@latest add shadcnestate/registry/listing-card-01

MIT-Lizenz. Der Befehl installiert listing-card-01 im eigenen Projekt.

Komponentenreferenz

Beispiel

Die breite Vorschau als React. Das Foto ist ein lokales Demo-Asset, und das ist kein Installationsbefehl.

import { ListingCard } from "@components/listing-card-01";

export function ListingPreview() {
	return (
		<ListingCard
			title={"Atelier Maris"}
			headingLevel={3}
			image={{
				src: "/images/blocks/atelier-maris.svg",
				alt: "Illustrierte Gartenseite der fiktiven Villa Atelier Maris",
				width: 1600,
				height: 1200,
			}}
			location={{
				formattedLocation: "41 Passage des Glycines, 13260 Cassis",
			}}
			price={{
				amount: "1860000",
				currency: "EUR",
				period: "sale",
				locale: "de-DE",
			}}
			propertyType={{
				label: "Haus",
				code: "house",
			}}
			features={[
				{ id: "bedrooms", label: "Schlafzimmer", value: "4" },
				{ id: "bathrooms", label: "Bäder", value: "3" },
				{ id: "living-area", label: "Wohnfläche", value: "186 m²" },
				{ id: "plot", label: "Grundstück", value: "920 m²" },
			]}
			cta={{
				href: "#atelier-maris",
				label: "Dieses Inserat ansehen",
			}}
			labels={{
				imageFallback: "Foto nicht verfügbar",
				priceFallback: "Preis auf Anfrage",
				loading: "Inserat wird geladen",
				periods: {
					sale: "Kaufpreis",
					month: "pro Monat",
					week: "pro Woche",
					night: "pro Nacht",
					year: "pro Jahr",
				},
			}}
		/>
	);
}