Shortcode displays as code instead of being rendered

I have a super strange problem. I have a nested shortcode but then some tags from shortcode get rendered as code. I believe this is something basic, but I fail to see it.

This is my _index.md

{{% section %}}

{{% card %}}

# Test

* Test 1
* Test 2
* Test 3

{{% /card %}}

{{% /section %}}

shortcodes/card.html:

<div{{ if (.Get "class") }} class="{{.Get "class"}}"{{end }}>
	<div class="card">
		<div class="card-content">
			{{ if (.Get "title") }}
			<span class="card-title">{{ .Get "title"}}</span>
			{{ end }}
			{{ .Inner }}
		</div>
	</div>
</div>

shortcodes/section.html:

<div class="divider"></div>
<div class="section container row">
{{ .Inner }}
</div>

This then gives me the following output:

<div class="divider"></div>
<div class="section container row">
<div>
	<div class="card">
		<div class="card-content">
<pre><code>		&lt;h1 id=&quot;test&quot;&gt;Test&lt;/h1&gt;
</code></pre>
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
<pre><code>	&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>

And if that’s part of the problem, I have the following in my config.toml:

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

Any help would be greatly appreciated.

Use the <> notation for the outer call.

{{< section >}}
{{% card %}}

# Test

* Test 1
* Test 2
* Test 3

{{% /card %}}
{{< /section >}}

To avoid the %% notation completely, and to allow markup.goldmark.renderer.unsafe = true, rework the card shortcode:

<div{{ if (.Get "class") }} class="{{.Get "class"}}"{{end }}>
	<div class="card">
		<div class="card-content">
			{{ if (.Get "title") }}
			<span class="card-title">{{ .Get "title"}}</span>
			{{ end }}
			{{ .Inner | .Page.RenderString }}  {{/* Renders the markdown */}}
		</div>
	</div>
</div>

Then you can do this:

{{< section >}}
{{< card >}}
# Test

* Test 1
* Test 2
* Test 3
{{< /card >}}
{{< /section >}}