HT-02 Deal card

Code: HT-02
Group: Lists
Use for: Real discounts: % badge, struck-through price, sold bar
Place it: “On sale” block

LIVE PREVIEW · SAMPLE DATAMatch your brand color

Click a product to see the ht:click event.

Products, prices, ratings, sold counts and the countdown in the preview are sample data to show the layout, not real products. On your own site, use real numbers only.

Note for non-Vietnamese sites: HT-Kit v1.0 was built for Vietnamese affiliate sites. Its built-in labels (sold count, pros/cons headings, tier names) are in Vietnamese and prices are formatted in đồng (₫). Button text and block titles can be changed with attributes; the other labels cannot yet.

Snippet for HT-02

<div data-ht="HT-02"
     data-ht-src="#san-pham"></div>

Or call it from JavaScript: HTKit.render(target, 'HT-02', products, {cta: 'See price'})

First, once for the whole site

Load the kit:

<link rel="stylesheet" href="/htkit.css">
<script src="/htkit.js" defer></script>

Declare your product list:

<script type="application/json" id="san-pham">
[{"id":"q1","name":"Product name",
  "price":489000,"oldPrice":650000,
  "img":"anh.webp","url":"AFFILIATE-LINK",
  "rating":4.8,"sold":3200}]
</script>

Match your brand color: :root{--ht-accent:#d3306b}. Every link carries rel="nofollow sponsored noopener"; every click fires an ht:click event with {code, id, name, url}.

← HT-01 Standard grid HT-03 Horizontal row →