How do you handle multiple fields per line?

So imagine that I had a rental property site, and it listed units by how many bedrooms and bathrooms. Each is a field associated with the property, and in the heading, I want to display both. So something like:

“3 bedroom, 2 bathroom in Hollywood, CA”

That’s 3 separate fields: [bed], [bath], and [location]. Are there any best practices for how to “code” this in the collection template? I suppose ideally I could use a single [h1] with multiple [span] tags that have their own class. So for example:

<h1><span class="bed">3</span> bedroom, <span class="bath">2</span> in <span class="bed">Hollywood, CA</span>"</h1>

Does that make sense? Right now, I’m just doing it with a whole bunch of display: inline headings on a single row:

<h1>3</h1><h2>bed, </h2><h1>2</h1><h2>bath</h2>... etc.

You can see this would be undesirable! I feel like I’m missing something obvious… How would you normally do something like this for a single entry?


Currently you can’t bind CMS data to span elements. They way I work around this is to use an embed element and write out the H1 and use the CMS to pushes multiple fields into that tag.

1 Like

Ah, that’s a good idea! Hadn’t thought of that but it’ll work just fine.