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

<div class="gh-main-content-card gh-product-card" data-test-product-card={{@product.slug}}>
    <div class="gh-product-card-block title-block">
        <h3 class="gh-product-card-name" data-test-name>
            {{@product.name}}
        </h3>
        <p class="gh-product-card-description" data-test-description>
        {{#if @product.description.length}}
            {{@product.description}}
        {{else}}
            No description added for this tier.
        {{/if}}
        </p>
    </div>
    <div class="gh-product-card-block benefits-block" data-test-benefits>
        <h4>Benefits <span class="counter">({{or @product.benefits.length "0"}})</span></h4>
        {{#if @product.benefits.length}}
            <ul class="benefits">
                {{#each @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 @product.type "free" )}}
        <div class="gh-product-card-block">
            <div class="gh-product-price-container">
                <div class="gh-product-card-price" data-test-free-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 @product.type "paid" )}}
        <div class="gh-product-card-block">
            <div class="gh-product-price-container">
                <div class="gh-product-card-price" data-test-monthly-price>
                    <div class="flex items-start">
                        <span class="currency">{{currency-symbol this.productCurrency}}</span>
                        <span class="amount">{{gh-price-amount @product.monthlyPrice.amount}}</span>
                    </div>
                    <div class="period">Monthly</div>
                </div>
                <div class="gh-product-card-price" data-test-yearly-price>
                    <div class="flex items-start">
                        <span class="currency">{{currency-symbol this.productCurrency}}</span>
                        <span class="amount">{{gh-price-amount @product.yearlyPrice.amount}}</span>
                    </div>
                    <div class="period">Yearly</div>
                </div>
            </div>
        </div>
    {{/if}}
    {{#if (eq @product.type "paid" )}}
    <div class="gh-product-card-button-container">
        <span class="dropdown">
            <GhDropdownButton
                @dropdownName="tiers-actions-menu-{{@product.name}}"
                @classNames="gh-btn gh-btn-action-icon gh-btn-icon gh-btn-outline gh-product-card-actions-button 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-{{@product.name}}"
                    @tagName="ul"
                    @classNames="gh-tier-actions-menu dropdown-menu dropdown-triangle-top-right"
                >
                    <li>
                        <button class="mr2" type="button" {{on "click" (fn this.openEditProduct @product)}}>
                            <span>Edit</span>
                        </button>
                    </li>
                    {{#if this.showArchiveOption}}
                        <li>
                            <Settings::Members::ArchiveTier
                                @product={{@product}}
                                @onUnarchive={{@onUnarchive}}
                                @onArchive={{@onArchive}}
                            />
                        </li>
                    {{/if}}
                </GhDropdown>
        </span>
    </div>
    {{else}}
    <div class="gh-product-card-button-container">
        <button type="button" {{on "click" (fn this.openEditProduct @product)}} class="gh-btn gh-btn-action-icon gh-btn-icon gh-btn-outline gh-product-card-edit-button icon-only" data-test-button="edit-product">
            <span>
                {{svg-jar "pen"}}
            </span>
        </button>
    </div>
    {{/if}}
</div>