Price

aidsgn-price displays already localized price strings. The application remains responsible for currency and locale formatting.

€19.99€2.00 / 100 g

<aidsgn-price value="€19.99" unit-price="€2.00 / 100 g"><span class="aidsgn-price__value">€19.99</span><span class="aidsgn-price__unit">€2.00 / 100 g</span></aidsgn-price>

Sale and top deal

€19.99€24.99Save 20%€19.99€24.99Save 20%

<aidsgn-price value="€19.99" original-value="€24.99" discount="Save 20%" variant="sale"><span class="aidsgn-price__value">€19.99</span><del class="aidsgn-price__original">€24.99</del><span class="aidsgn-price__discount">Save 20%</span></aidsgn-price>
<aidsgn-price value="€19.99" original-value="€24.99" discount="Save 20%" variant="top-deal" size="large"><span class="aidsgn-price__value">€19.99</span><del class="aidsgn-price__original">€24.99</del><span class="aidsgn-price__discount">Save 20%</span></aidsgn-price>

Use explicit discount wording so the meaning is available without relying on color. original-value uses native deleted-text semantics. See the component specification for the complete contract.

Usage guidelines

Do

Provide display-ready values

Pass complete, locale-formatted prices with their currency and meaningful unit text.

Do

State discounts explicitly

Include clear discount copy and an original value so sale meaning never depends on color alone.

Don’t

Avoid calculations in Price

Calculate, round, and localize monetary values before passing them to this presentational component.

Don’t

Never invent marketing claims

Use sale or top-deal only when accurate comparison data supports the claim.