Product Card Template
Here's an example of a product card detailing an entry-level plan, offering a fundamental set of features tailored for individual users.
Initially, the card showcases a pertinent icon and a concise title, along with highlighting the standard feature set designed for entry-level users.
Moreover, the card underscores the inclusion of desktop access, a pivotal aspect of this particular plan.
Additionally, the card displays pricing details, encompassing the currency symbol, cost, and billing cycle.
For enhanced user engagement, the card facilitates plan selection through a clickable "SELECT" button.
In summary, this product card aims to furnish individuals with a straightforward overview of the entry-level plan's features and pricing structure, empowering them to make well-informed choices.
<%@ page contentType="text/html;charset=UTF-8"%>
<html>
<head>
</head>
<body>
<div class="product-item base-product product-plan" data-bind="css:{'selected': selected()}">
<div class="title-wrapper">
<div class="icon" style="background-image: url('https://yoururl.com')"></div>
</div>
<p class="sub-header-text">Entry-level, out-of-the-box feature set for individuals</p>
<p class="font-normal firstLine" style="font-weight: 500; margin: 32px 0px 30px;">Desktop access</p>
<hr>
<p class="plan-price"><span>${currency.symbol}</span>#{price}#</p>
<p class="font-normal no-margin priceCurrency">#{currency.text}#/#{uom}#/#{billingPeriod}#</p>
<div class="button-wrapper">
<div class="qty-container" data-bind="visible: selected()">
&<input type="text" class="input-spinner" min="0" data-bind="value: quantity">
</div>
<button class="btn btn-primary" data-bind="click: select">SELECT</button>
</div>
</div>
</body>
</html>