Product Card Template

Below 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>

PreviousDeveloper Docs NextDynamic Fields for Product HTML

Last updated 22 hours ago

Was this helpful?