Skip to content

Listing card

A property, rental or venue in a results grid: photo, price, key facts, address and a save toggle, the title is the link.

CSS + mian.js JSON Markdown Registry item

Results grid

Energy C

€520 /month

Studio by the park

Bd. Eroilor 21, Cluj-Napoca

  • 34 m²
  • 1 room
  • 1 bath

Installation

Everything ships in one stylesheet and one small script. There is nothing to import per component.

<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>

Prefer to own the files? /r/listing-card.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.

Class reference

Class / attributeDescription
mn-listingsThe results grid.
mn-listingOne listing (an <article>). The title link covers the card.
mn-listing-mediaThe photo area; badges sit on it.
mn-listing-pricePrice with its period or basis (“/month”, “asking”).
mn-listing-factsSize, rooms, baths: a list with units.
mn-listing-saveA toggle button (aria-pressed) above the link.

Accessibility

  • The title is the only link; the save button sits above it with its own name (“Save 2-room flat in Cotroceni”).
  • Facts are a list with units spelled out for screen readers (m² is read as “square metres”).
  • Price includes its basis (“per month”, “asking price”) in text, not colour.
Pages
Introduction Installation Theming & noodles Frameworks Accessibility Designing websites AI agents, API & MCP All components All noodles All templates
Templates
Ledger Pipeline Quanta Beacon Relay Forma Tessera Noir Villa Orsola Nido Casa Hana Kiln Nove Circle Field Notes Lumen Pace Aldini Studio Ito Orto Dot One Mist Signal 26
Actions
Button Button group Toggle group Dropdown menu Copy button Swap Hold to confirm
Forms
Field Input Textarea Select Checkbox Radio Switch Slider File input Input group Number input OTP input Rating Combobox Calendar Tag input Password field Swatch picker Time slots Seat map Option cards Date range Task list Duration picker
Data display
Typography Avatar Badge Chip Card Table List Kbd Code Stat Chart Timeline Accordion Description list Divider Skeleton Empty state Indicator Chat Tree view Kanban board Usage meter Notification list Invoice Funnel Leaderboard Product gallery Review summary Social post Profile header Comment thread Filter bar Bulk actions Curriculum Listing card KPI card Heatmap Gauge Breakdown Uptime Voice note
Feedback
Alert Toast Progress Radial progress Spinner Banner Onboarding checklist Loader Cookie consent
Overlays
Modal Drawer Popover Tooltip Command palette Hover card Context menu
Navigation
Navbar Tabs Breadcrumbs Pagination Steps Sidebar Dock Stories bar Page header
Layout & utilities
Collapse Carousel Theme controller Scroll area Mockup Dashboard grid Gradient backdrop Motion
Sections
Slides Jobs list Work grid Comparison table Changelog Integrations Contact section Page layout Site header Hero Logo cloud Feature grid Bento grid Media Testimonial Pricing Call to action Site footer Article App shell Docs layout Sign-in page Price list Team Product card Story card Agenda FAQ section Figures Process
Noodles
Mian Yangchun Linguine Penne Chitarra Shio Spaghetti Bucatini Hofun Hiyamugi Ramyeon Fettuccine Lasagne Pappardelle Paccheri Farfalle Yinzhen Quadretti Acini di pepe Kalguksu Sanuki Hakata Ditalini Juksing Kishimen LaMian Somen Capellini Longxu Misua Bún Kuzukiri Sotanghon Harusame Fensi Tokoroten Nagashi Liangfen Dangmyeon Woonsen Shirataki Cha Soba Daoxiao Pici Naengmyeon Hōtō Ramen Biangbiang Maccheroni Rigatoni Fusilli Jjajang Laksa Soba Tagliatelle Tajarin Mafaldine Corzetti Inaniwa Yifu Udon Gnocchi Cavatelli Orecchiette Mee Mixian Pho
↑↓navigate↵openescclose
Choose a noodle

Minimal

Flat

Pixel

Linear

Thin

Glass

Textured

Bold

Elegant

Rounded
On this page