In a game of memory, there are lots of cards. Normally cards are quite narrow and laid out left to right before top to bottom, but that is not a battle I am going fight here. I used a Kitten component, since this is an *xml* construction of the above rather than a new leaf of markdown. Lack of indentation strategy mine (integrating [xhtmlambda](https://xhtmlambda.common-lisp.dev/), one day).

> EDIT: I had to include this `div` with both an `id` and `morph` for it to work live.

```
const MemoryCards = () => kitten.html`
<div id='memory' morph>
\${kitten.db.Data.CardSpread.map(card => kitten.html`
    <\${CardSide}>
    <content for='index'>\${card.index}</content>
    <content for='side_up'>
    <if \${card.visible == 'yes'}>
    <then>\${card.front}</then>
    <else>\${card.back}</else>
    </if>
    </content>
    </>    
    `)}
</div>
`
```

Generating this parameterless *xml*, since it is defined by the kitten application database's current data:

```
<\${MemoryCards} />
```