Ghost/ghost/admin/app/components/gh-membership-products-alpha.hbs

<label>Tiers</label>
<div class="gh-product-cards">
{{#each this.products as |product productIdx|}}
    <div class="gh-product-card">
        <button class="gh-product-card-editbutton gh-btn gh-btn-text gh-btn-link green" {{action "openEditProduct" product}}>
            <span>Edit</span>
        </button>
        <div class="gh-product-card-block">
            <h3 class="gh-product-card-name">
                {{product.name}}
            </h3>
            <p class="gh-product-card-description">
                {{product.description}}
            </p>
        </div>
        <div class="gh-product-card-block benefits-block">
            <h4>Benefits <span class="counter">({{if product.benefits.length 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>
        <div class="gh-product-card-block">
            <div class="gh-product-price-container">
                <div class="gh-product-card-price">
                    <div class="flex items-baseline">
                        <span class="amount">{{gh-price-amount product.monthlyPrice.amount}}</span>
                        <span class="currency">{{product.monthlyPrice.currency}}</span>
                    </div>
                    <div class="period">Monthly</div>
                </div>
                <div class="gh-product-card-price">
                    <div class="flex items-baseline">
                        <span class="amount">{{gh-price-amount product.yearlyPrice.amount}}</span>
                        <span class="currency">{{product.monthlyPrice.currency}}</span>
                    </div>
                    <div class="period">Yearly</div>
                </div>
            </div>
        </div>
    </div>
{{/each}}

<div class="gh-product-cards-footer">
    <button class="gh-btn gh-btn-link gh-btn-text gh-btn-icon gh-btn-add-product green" {{action "openNewProduct" product}}><span>{{svg-jar "add-stroke" class="stroke-green"}}Add tier</span></button>
    {{!-- <span>&ndash; Advanced (<a href="javascript:">learn more</a>)</span> --}}
</div>
</div>

{{#if this.showProductModal}}
    <GhFullscreenModal
        @modal="product"
        @model={{hash
            product=this.productModel
        }}
        @confirm={{this.confirmProductSave}}
        @close={{this.closeProductModal}}
        @modifier="edit-product action wide" />
{{/if}}