How can I use mv-list along with a header & a subtitle in a same section?

[creativetushar]

What I am trying to achieve is a section of a html page that shows data from google sheet

Title
Subtitle

6 List Items

HTML Code -

<div class="benifit-card" mv-list-item>
    <img src="" property="Image" alt="">
    <p property="Desc"></p>
</div>

[DmitrySharabin]

Hey there, @creativetushar,

The Google Sheets plugin's main limitation is that it is meant to work with only one list, such as the list of cards you use in your app. Think of it as one app ↔ one table on a sheet. You'll probably fail if you try to mix simple properties with a list (as you already noticed).

However, it doesn't mean that there is no solution. You can have as many apps on your page as you need. And each app can use the same spreadsheet and even the same sheet, but different ranges: one range (3:4 in your case) for a list of cards, another range (A1:B2) for title and subtitle.

Keep in mind that from the plugin's perspective, A1:B2 is a list (each item has two properties: Title and Subtitle). But this list has only one item, and you can get the values of this item as simple properties.

In code, you can have something like this:

<header
	mv-app mv-plugins="gsheets"
	mv-source="https://docs.google.com/spreadsheets/..."
	mv-source-sheet="Benefits"
	mv-source-range="A1:B2"
	mv-source-options="dataInColumns">

	<h1 property="title">Title</h1>
	<p property="subtitle">Subtitle</p>

</header>

<main 
	mv-app mv-plugins="gsheets"
	mv-source="https://docs.google.com/spreadsheets/..."
	mv-source-sheet="Benefits"
	mv-source-range="3:4"
	mv-source-options="dataInColumns">

	<div class="benifit-card" mv-list-item>
    		<img src="" property="Image" alt="">
    		<p property="Desc"></p>
	</div>
</main>

[DmitrySharabin]

And one more thing: Even if you can have many Mavo apps on the page, you can't have an app inside another app for now. This simply won't work.