Ghost/ghost/admin/app/components/gh-product-card.hbs

<div class="gh-main-content-card gh-product-card">
    <div class="gh-product-card-block title-block">
        <h3 class="gh-product-card-name">
            {{this.product.name}}
        </h3>
        <p class="gh-product-card-description">
            {{this.product.description}}
        </p>
    </div>
    <div class="gh-product-card-block benefits-block">
        <h4>Benefits <span class="counter">({{if this.product.benefits.length product.benefits.length "0"}})</span></h4>
        {{#if this.product.benefits.length}}
            <ul class="benefits">
                {{#each this.product.benefits as |benefit|}}
                    <li>{{svg-jar "check"}} {{benefit.name}} </li>
                {{/each}}
            </ul>
        {{else}}
            <p class="gh-product-card-description">No benefits added for this tier.</p>
        {{/if}}
    </div>
    {{#if (eq this.product.type "free" )}}
        <div class="gh-product-card-block">
            <div class="gh-product-price-container">
                <div class="gh-product-card-price">
                    <div class="flex items-start">
                        <span class="currency">{{currency-symbol this.productCurrency}}</span>
                        <span class="amount">0</span>
                    </div>
                </div>
            </div>
        </div>
    {{/if}}
    {{#if (eq this.product.type "paid" )}}
        <div class="gh-product-card-block">
            <div class="gh-product-price-container">
                <div class="gh-product-card-price">
                    <div class="flex items-start">
                        <span class="currency">{{currency-symbol this.productCurrency}}</span>
                        <span class="amount">{{gh-price-amount this.product.monthlyPrice.amount}}</span>
                    </div>
                    <div class="period">Monthly</div>
                </div>
                <div class="gh-product-card-price">
                    <div class="flex items-start">
                        <span class="currency">{{currency-symbol this.productCurrency}}</span>
                        <span class="amount">{{gh-price-amount this.product.yearlyPrice.amount}}</span>
                    </div>
                    <div class="period">Yearly</div>
                </div>
            </div>
        </div>
    {{/if}}
    <div class="gh-product-card-editbutton-container">
        <span class="dropdown">
            <GhDropdownButton
                @dropdownName="tiers-actions-menu-{{this.product.name}}"
                @classNames="gh-btn gh-btn-action-icon gh-btn-icon gh-btn-outline gh-product-card-editbutton icon-only"
                @title="Tiers Actions"
                data-test-button="tiers-actions"
            >
                <span>
                    {{svg-jar "dotdotdot"}}
                    <span class="hidden">Actions</span>
                </span>
            </GhDropdownButton>
                <GhDropdown
                    @name="tiers-actions-menu-{{this.product.name}}"
                    @tagName="ul"
                    @classNames="gh-tier-actions-menu dropdown-menu dropdown-triangle-top-right"
                >
                    <li>
                        <button class="mr2" {{action "openEditProduct" this.product}}>
                            <span>Edit</span>
                        </button>
                    </li>
                    {{#if (eq this.product.type "paid" )}}
                        <li>
                            <Settings::Members::ArchiveTier @product={{this.product}} />
                        </li>
                    {{/if}}
                </GhDropdown>
        </span>
    </div>
</div>