Best for

Freelance boards, hiring feeds — a listing with a rate and a Contact CTA

Anatomy

Avatar with a verified badge and a presence dot · a tag row · headline and description · rate + Hourly badge · a full-width Contact button · hover lifts the whole card

Best for

Cooking and food apps — a dish card with time, servings and difficulty

Anatomy

Photo with a badge · title and description · a three-cell stat row · ingredient tags · a Label / primary CTA pair

Best for

Rental catalogues — a tall photo, an inline price, no footer to spare

Anatomy

400px photo with a text badge · title with an inline /m price · a truncated description · a Beds / Bathrooms / Sqft stat row

Best for

Real-estate listings — a price-led card with a byline and two CTAs

Anatomy

Photo with an icon badge · price above a Location line · a stat row · a byline with a timestamp · a Label / View Details pair

Best for

Stay bookings — a full-bleed hero photo with a headline price

Anatomy

Full-bleed photo under a glass scrim · a glass badge · title, address and a headline price · a light stat row · a per-night price chip beside View Details · hover adds a border

Best for

Featured stays — the same full-bleed shell, no headline price, a booking CTA

Anatomy

Full-bleed photo under a glass scrim · a solid iconed badge · title and a pin-led address row, no price · a light stat row · a per-night chip beside Reserve Now

Best for

Insurance and account profiles — an identity card with a 7-field stat grid

Anatomy

Avatar with status badges · an icon chip over an expiry line · a QR block · a 2-column stat grid, one field with a copy affordance · a full-width dark CTA

Best for

Boarding passes, travel apps — a route with a live countdown and boarding details

Anatomy

An Active / Inactive toggle pill · a From / To route row around a countdown badge and progress bar · a boarding-info box with three dividers · a full-width brand CTA