Card Design

Overview

Mapsemble renders each feature in your map through a single Card Design system. The same HTML + CSS templates power both the cards in the list view and the popups (or bottom sheet) shown when a feature is selected. Designing one feature card automatically covers every place that feature can appear on the map.

Render locations

Every feature can be rendered in one of four render locations. Each location has its own HTML and CSS template, so you can tune the layout for each context independently.

The Card Design editor

The Card Design panel in the map builder is the single place to edit all four render locations.

• The List tab edits the templates used in the card list (listDesktop and, when mobile is enabled, listMobile).
• The Selected tab edits the templates used when a feature is selected (selectedDesktop and selectedMobile).
• Inside each tab, the Desktop / Mobile sub-tabs switch between the two device variants.
• Each variant has its own HTML and CSS sub-tabs.

Toggle Use mobile template on if you want a distinct mobile design. When it's off, the desktop template is used on every device, and the mobile fields are ignored. The List and Selected tabs share this toggle — turning it on enables mobile templates for both list cards and selected popups.

HTML templates

Templates use simple token-based placeholders. Use {{field_slug}} to insert any field value, and the special {{label}} token for the feature's label.

<div class="card">
  <h3>{{name}}</h3>
  <p>{{description}}</p>
  <img src="{{image}}" alt="{{name}}">
  <span class="price">{{price}}</span>
</div>

Every field in your dataset can be referenced as a token. The Card Design editor lists all available tokens for quick reference.

Tailwind CSS in templates

Mapsemble can compile any Tailwind utility classes used in your templates. Toggle Use Tailwind in the Card Design editor and Tailwind classes you write in the HTML are scanned and compiled automatically — no build step required.

Custom CSS

The CSS sub-tab lets you write scoped styles for that specific render location. The styles only apply to features in that location, so it's safe to use simple selectors without worrying about leakage to the rest of the page.

Field reference

Internally, the four render locations correspond to these style-config fields. You'll see these names in starter kit JSON, the API schema, and exported configurations.

Other related style options:

The Tailwind fields are populated automatically by the compiler when useTailwind is on — you don't edit them by hand.

AI template generation

Mapsemble can auto-generate templates from your field configuration. Use the Generate action inside the Card Design editor to produce a starting template for the active render location, or set generateTemplates: true on the map config to seed templates for a brand-new map. Generation is one-time — once templates are saved you can edit them freely.

The Card Design editor also includes an inline AI prompt field for refining the active template with natural language ("Add a price tag in the top-right corner").

Display types

Your map can show data in different layouts:

• Cards view — Map and a list of cards side by side (default).
• Map only — Full-screen map with selected popups on click.
• Table view — Tabular data display.

On all layouts, the Selected templates control how a feature is rendered when its marker is clicked.

Pagination

When pagination is enabled, list cards are paginated. Configure itemsPerPage to control how many cards appear per page (default: 24).

Scroll on hover

Set scrollCardsOnHover to automatically scroll the card list to the corresponding card when hovering over a marker.

Rendering features yourself

If your data lives in your own systems and you want full control over how each feature is drawn — using React, Vue, or any framework — use the Feature Renderer callback in shadow-embed mode. Your featureRenderer receives a location argument with the same four values (listDesktop, listMobile, selectedDesktop, selectedMobile) so you can branch your render logic to match the location, exactly as the built-in templates do.

Plan availability

Card Design is available on all plans. Custom CSS for cards and popups requires the Enterprise plan.