Section reference › Showcase & media

Listing cards `"type": "listings"`

General-purpose cards with a photo, badge, price, rating, title, subtitle and small facts. Use it for rooms, courses, tours, cars, classes, menus or any catalogue.

Example#

Paste this into the sections list of a page file:

JSON

{
  "type": "listings",
  "eyebrow": "Rooms & suites",
  "title": "Stay a little longer",
  "columns": 3,
  "items": [
    {
      "image": "placeholder",
      "badge": "Most booked",
      "title": "Garden Double",
      "subtitle": "Quiet room opening onto the courtyard",
      "price": "$189",
      "priceNote": "/ night",
      "rating": 4.8,
      "meta": [
        {
          "icon": "people",
          "text": "2 guests"
        },
        {
          "icon": "aspect-ratio",
          "text": "28 m²"
        },
        {
          "icon": "wifi",
          "text": "Free Wi-Fi"
        }
      ],
      "link": "room-garden-double.html"
    },
    {
      "image": "placeholder",
      "title": "Harbour View King",
      "subtitle": "Floor-to-ceiling windows over the bay",
      "price": "$259",
      "priceNote": "/ night",
      "rating": 5,
      "meta": [
        {
          "icon": "people",
          "text": "2 guests"
        },
        {
          "icon": "aspect-ratio",
          "text": "34 m²"
        },
        {
          "icon": "water",
          "text": "Sea view"
        }
      ],
      "link": "room-harbour-king.html"
    },
    {
      "image": "placeholder",
      "badge": "Family",
      "title": "Loft Suite",
      "subtitle": "Two levels, a kitchenette and room for four",
      "price": "$349",
      "priceNote": "/ night",
      "rating": 4.5,
      "meta": [
        {
          "icon": "people",
          "text": "4 guests"
        },
        {
          "icon": "aspect-ratio",
          "text": "52 m²"
        },
        {
          "icon": "cup-hot",
          "text": "Kitchenette"
        }
      ],
      "link": "room-loft-suite.html"
    }
  ],
  "buttons": [
    {
      "label": "See all rooms",
      "href": "rooms.html",
      "style": "outline",
      "icon": "arrow-right"
    }
  ]
}

Options#

Option	Type	Default	Description
`eyebrow`	string	—	Small label shown above the title.
`title`	string	—	Section heading. Simple inline HTML such as <em> or <br> is allowed.
`text`	string	—	Short intro paragraph under the title.
`headAlign`	string	`center`	Alignment of the eyebrow/title/text block. Any value other than "center" (e.g. "start") left-aligns it. Values: `center \| start`
`items`	array	—	The cards. In multi-page demos often { "$data": "rooms", "limit": 3 }.
`columns`	number	`3`	Cards per row on large screens. Values: `1 \| 2 \| 3 \| 4 \| 6`
`buttons`	array	—	Buttons shown centred under the grid. See the button fields below.

Also accepts the options every section accepts: id, tone, padding, fluid, class, hidden.

Fields of each entry in `items`#

Option	Type	Default	Description
`image`	string	—	Card photo.
`badge`	string	—	Label on the top of the photo, e.g. "Best seller".
`price`	string	—	Price tag on the photo, e.g. "$189".
`priceNote`	string	—	Small text after the price, e.g. "/ night".
`rating`	number	—	Star rating out of 5 (halves allowed).
`title`	string	—	Card title; the whole card links to "link".
`subtitle`	string	—	Line under the title.
`meta`	array	—	Small facts with icons: [{ "icon": "people", "text": "2 guests" }].
`link`	string	—	Card link (href also works). Defaults to "#".

Fields of each entry in `buttons`#

Option	Type	Default	Description
`label`	string	—	Button text. A button without a label is not shown.
`href`	string	—	Link target, e.g. "contact.html" or "#pricing". Defaults to "#".
`style`	string	`primary`	Button look. Values: `primary \| outline \| light \| dark \| accent \| link`
`icon`	string	—	Bootstrap Icons name shown after the label (e.g. "arrow-right"). "link" buttons get an arrow automatically.
`video`	string	—	YouTube embed URL (https://www.youtube.com/embed/VIDEO_ID). When set, the button opens the video in a pop-up instead of following href.

Tips#

Keep meta to three short facts so they stay on one line.
Use 3 or 6 cards with 3 columns so the rows are full.

Where it's used#

Open these pages in template/ to see it working:

SaaS Product: template/saas/customers.html (source src/demos/saas/pages/customers.json)
Tech Conference: template/conference/workshop-production-llm-apps.html (source src/demos/conference/pages/workshop.json)
Online Academy: template/education/404.html (source src/demos/education/pages/404.json)
Coffee Shop: template/cafe/workshops.html (source src/demos/cafe/pages/workshops.json)
Hotel & Resort: template/hotel/booking.html (source src/demos/hotel/pages/booking.json)
Wedding: template/wedding/venues.html (source src/demos/wedding/pages/venues.json)
Gym & Fitness: template/gym/class-strength-foundations.html (source src/demos/gym/pages/class.json)
Yoga Studio: template/yoga/class-vinyasa-flow.html (source src/demos/yoga/pages/class.json)
Day Spa & Salon: template/spa/packages.html (source src/demos/spa/pages/packages.json)
Medical Clinic: template/medical/department-family-medicine.html (source src/demos/medical/pages/department.json)
Car Dealer: template/car-dealer/blog-post-new-vs-certified-pre-owned.html (source src/demos/car-dealer/pages/blog-post.json)
Travel Agency: template/travel/destination-italy.html (source src/demos/travel/pages/destination.json)
Fashion Store: template/fashion-store/stores.html (source src/demos/fashion-store/pages/stores.json)
Charity: template/charity/404.html (source src/demos/charity/pages/404.json)
Logistics: template/logistics/network.html (source src/demos/logistics/pages/network.json)

Listing cards "type": "listings"