card.handlebars

{{#if title}}
    <h2 class="mt-3 mb-0">{{title}}</h2>
{{/if}}
{{#if description}}
    <p>{{description}}</p>
{{/if}}
{{#if description_md}}
    {{{markdown description_md}}}
{{/if}}
<div class="
    row
    row-cols-1
    {{#if columns}}
        {{#if (gt columns 2)}}row-cols-sm-2{{/if}}
        row-cols-lg-{{columns}}
    {{else}}
        row-cols-sm-2
        row-cols-md-3
        row-cols-lg-4
        row-cols-xl-5
    {{/if}}
    gx-2 gy-2
    mt-1 mb-3 {{class}}">
    {{#each_row}}
        <div class="col {{class}}" {{#if id}}id="{{id}}"{{/if}}>
            <div class="card h-100 {{#if active}}card-active{{/if}}" {{#if (and embed (ne embed_mode "iframe"))}}data-pre-init="card" data-embed="{{embed}}"{{/if}}>
                {{#if link}}
                    <a href="{{link}}" style="text-decoration: inherit; color: inherit">
                {{/if}}
                {{#if top_image}}
                    <img src="{{top_image}}" class="card-img-top" />
                {{/if}}
                {{#if color}}
                    <div class="card-status-start bg-{{color}}"></div>
                {{/if}}
                <div class="card-body">
                    {{#if title}}<h2 class="card-title fs-3 me-3">{{title}}</h2>{{/if}}
                    <div class="card-content remove-bottom-margin">
                        {{~description~}}
                        {{~#if description_md~}}
                            {{{markdown description_md}}}
                        {{~/if~}}
                    </div>
                    {{~#if embed ~}}
                    {{~#if (eq embed_mode "iframe")}}
                        <iframe src="{{embed}}" 
                            width="{{#if width}}{{width}}{{else}}100%{{/if}}"
                            {{~#if height}} height="{{height}}"{{/if~}}
                            {{~#if allow}} allow="{{allow}}"{{/if~}}
                            {{~#if sandbox}} sandbox="{{sandbox}}"{{/if~}}
                        >
                        </iframe>
                    {{~else~}}
                        <div class="spinner-border card-loading-placeholder" role="status" style="width: 3rem; height: 3rem;">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    {{~/if~}}
                    {{~/if~}}
                </div>
                {{#if link}}
                    </a>
                {{/if}}
                {{#if footer}}
                    <div class="card-footer text-muted py-2">
                    {{#if footer_link}}
                            <a href="{{footer_link}}">{{footer}}</a>
                    {{else}}
                            {{footer}}
                    {{/if}}
                    </div>
                {{/if}}
                {{#if footer_md}}
                    <div class="card-footer text-muted py-2 remove-bottom-margin">
                        {{{markdown footer_md}}}
                    </div>
                {{/if}}
                {{#if icon}}
                    <div class="ribbon bg-{{color}} fs-2">
                        {{~icon_img icon~}}
                    </div>
                {{/if}}
            </div>
        </div>
    {{/each_row}}
</div>