Show plan details

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="recommendation-container">
  <h3><small>Your recommended plan is:</small></h3>
  <h2>{{planName}}</h2>
  <p>{{subtitle}}</p>
  {{#if isPaidAppPlan}}
  <div class="plan-details-holder">
    <h4>Price details</h4>
    <div class="price-details-holder">
      <div class="price-labels">
        <div>Monthly price</div>
        <div>App users <small>(per app)</small></div>
        <div>App quantity</div>
      </div>
      <div class="price-values">
        <div class="montly-cost">{{monthlyCost}}</div>
        <div class="app-user-quantity">{{numberOfUsers}}</div>
        <div class="app-quantity">x{{numberOfApps}}</div>
      </div>
    </div>
    <div class="totals-holder">
      <div class="monthly-total">
        <div>Monthly Total</div>
        <div>{{totalMonthlyCost}}</div>
      </div>
      <div class="yearly-total">
        <div>Yearly discount <small>(2 months off)</small></div>
        <div>{{totalYearlyCost}}</div>
      </div>
    </div>
  </div>
  {{/if}}
</div>

CSS

.recommendation-container {
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.15);
}

.recommendation-container h3 {
  margin-bottom: 5px;
}

.recommendation-container h3 + h2 {
  margin-top: 0;
}

.plan-details-holder {
  margin-top: 30px;
}

.price-details-holder {
  display: flex;
  justify-content: space-between;
}

.price-labels {
  color: #8d8f91;
}

.price-values {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.totals-holder {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.monthly-total {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
}

.yearly-total {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}