Pricing

List Price

Simple list prices use the List Price component, which currently looks the same as normal text (but might not in a future rebrand).

<p>
  Here is a List Price: <ListPrice>$20.00</ListPrice>
</p>

Pricing Comparison

Inside a Pricing Comparison component, the List Price gets a strikethrough appearance, since we also show the Discount Price:

<p>
  A Pricing Comparison:
  <PricingComparison>
    <VisuallyHidden>was</VisuallyHidden>
    <ListPrice>$20.00</ListPrice>
    <VisuallyHidden>now</VisuallyHidden>
    <DiscountPrice>$14.99</DiscountPrice>
  </PricingComparison>
</p>

Note that the Pricing Comparison must have visually hidden text that provides context for the pricing change! Users on assistive technologies may not be able to see the strikethrough styling that tells sighted users that the old price is no longer valid. (You don't have to use the exact phrasing shown here, but must have enough text that the price makes sense to users on screen readers.) Discount Price can also be used by itself (outside of a Pricing Comparison block) to indicate price savings:

<p>
  A Discount Price by itself:
  <DiscountPrice>You saved $12.34!</DiscountPrice>
</p>

full Pricing component

A full Pricing component may also include a Pricing Offer (such as "100 Starting at") and/or a Short Tax Message (such as "Inc. VAT"):

<p>
  A full Pricing component, with all sub-components:
  <Pricing>
    <PricingOffer>100 Starting at</PricingOffer>{' '}
    <PricingComparison>
      <VisuallyHidden>was</VisuallyHidden>
      <ListPrice>€10.99</ListPrice>
      <VisuallyHidden>now</VisuallyHidden>
      <DiscountPrice>€8.99</DiscountPrice>
    </PricingComparison>{' '}
    <ShortTaxMessage>Inc. VAT</ShortTaxMessage>
  </Pricing>
</p>

<span class="pricing">
  <span class="pricing-offer">100 Starting at</span>
  <span class="comparative-pricing">
    <span class="list-price">€10.99</span>
    <span class="discount-price">€8.99</span>
  </span>
  <span class="short-tax-message">Inc. VAT</span>
</span>