Packs

Commerce components

The commerce pack's 6 components: shopping: products, pricing plans, carts, ratings, comparisons and prices.

View as Markdown

Add it with packs: ["commerce"], or leave packs out for every pack.

Product

One product with its price; a short description between the tags, then a Button with ask for each thing the reader can do with it (Add to cart, Tell me more); rating is out of 5, count how many rated it. When the reader is choosing what to buy, show each option as one, side by side in Columns.

Between its tags: inline text: its label. It also takes Buttons, drawn under it as what the reader can do.

Attribute Type Required Values
name text yes
price text
was text
image address
rating number
count number
badge text
href address

Studio Headphones

Sale

$249$299

★★★★★

Closed-back, 30 hours of battery, folds flat.

Travel Earbuds

$129

★★★★★

Small case, noise cancelling, 8 hours a charge.

The model's answer
<Columns>
<Product name="Studio Headphones" price="$249" was="$299" rating="4.5" badge="Sale">Closed-back, 30 hours of battery, folds flat.</Product>
<Product name="Travel Earbuds" price="$129" rating="4.1">Small case, noise cancelling, 8 hours a charge.</Product>
</Columns>

Plan

A pricing plan, its features as a Markdown list inside.

Between its tags: a Markdown list.

Attribute Type Required Values
name text yes
price text yes
period text
note text
featured true or false

Starter

$0/month

  • 3 projects
  • Community support

Team

$29/month

Most popular

  • Unlimited projects
  • SSO
  • Priority support

Enterprise

Custom

  • Audit logs
  • 99.99% SLA
  • A named contact
The model's answer
<Columns>
<Plan name="Starter" price="$0" period="/month">
- 3 projects
- Community support
</Plan>
<Plan name="Team" price="$29" period="/month" featured="true" note="Most popular">
- Unlimited projects
- SSO
- Priority support
</Plan>
<Plan name="Enterprise" price="Custom">
- Audit logs
- 99.99% SLA
- A named contact
</Plan>
</Columns>

Cart

Items and totals, from the Markdown table inside: the item, the quantity, the price.

Between its tags: a Markdown table (first column labels, the others series).

Attribute Type Required Values
title text
total text
note text
Your cart
ItemQtyPrice
Studio Headphones1$249.00
USB-C cable2$24.00
Hard case1$139.00
Total$412.00
Free shipping over $50
The model's answer
<Cart title="Your cart" total="$412.00" note="Free shipping over $50">
| Item | Qty | Price |
|---|---|---|
| Studio Headphones | 1 | $249.00 |
| USB-C cable | 2 | $24.00 |
| Hard case | 1 | $139.00 |
</Cart>

Rating

A real star rating out of max, never a made-up one.

Between its tags: nothing: it closes itself (<Name ... />).

Attribute Type Required Values
value number yes
max number
count text

The Studio Headphones are rated ★★★★★4.6(1,203 reviews) by buyers, the earbuds ★★★★★3.9(88 reviews).

The model's answer
The Studio Headphones are rated <Rating value="4.6" count="1,203 reviews" /> by buyers, the earbuds <Rating value="3.9" count="88 reviews" />.

Compare

Options side by side, from the Markdown table inside: the feature, then one column per option; yes and no become marks.

Between its tags: a Markdown table (first column labels, the others series).

Attribute Type Required Values
title text
Phones
FeaturePixel 10iPhone 17Galaxy S26
Screen6.3"6.1"6.2"
Battery4,700 mAh3,600 mAh4,000 mAh
5GYesYesYes
Headphone jackNoNoNo
Price$799$829$799
The model's answer
<Compare title="Phones">
| Feature | Pixel 10 | iPhone 17 | Galaxy S26 |
|---|---|---|---|
| Screen | 6.3" | 6.1" | 6.2" |
| Battery | 4,700 mAh | 3,600 mAh | 4,000 mAh |
| 5G | yes | yes | yes |
| Headphone jack | no | no | no |
| Price | $799 | $829 | $799 |
</Compare>

Price

A price, with the old one struck through.

Between its tags: nothing: it closes itself (<Name ... />).

Attribute Type Required Values
value text yes
was text
period text
note text

$49$79/monthFirst year, then $79

The model's answer
<Price value="$49" was="$79" period="/month" note="First year, then $79" />