SWAN Design System

Overview Designers Developers React setup Vanilla setup Tokens Migration Intercompatibility Contribution

Overview Accessibility All Tokens Color Constants Core props Date/Time Glossary Grid Layout Icons Modes Responsive System Space Typography Phone number

Overview Accordion Alert Box Anchor Bar Aspect Ratio Avatar Banner Bounded Content Box Breadcrumbs Button Buttonbar Callout Card Carousel Checkbox Collapsible Color Swatches Combobox Component Utilities Convenience Elements Count Divider Dropdown Error Boundary Fieldset File Input FlexBox Fluid Image Form Grid Heading (H1–H6)Hidden Left Hand Navigation Link List Listbox Menu Modal Dialog Page Wrappers Pagination Pipe Separator Popover Price Bar Pricing Progress Bar Progressive Image Promo Code Radio Button Range Ratings Stars Responsive Image Search Input Selection Set Skeleton Text Spinner Square Image Container Standard Tile Step Indicator Table Tabs Text Area Text Input Thumbnails Hero Toggle Switch Typography Uncustomizable Markup Visible Visually Hidden Zoom Controls

SWAN Design System

Show all code

SWAN Design System

Overview Designers Developers React setup Vanilla setup Tokens Migration Intercompatibility Contribution

Overview Accessibility All Tokens Color Constants Core props Date/Time Glossary Grid Layout Icons Modes Responsive System Space Typography Phone number

Overview Accordion Alert Box Anchor Bar Aspect Ratio Avatar Banner Bounded Content Box Breadcrumbs Button Buttonbar Callout Card Carousel Checkbox Collapsible Color Swatches Combobox Component Utilities Convenience Elements Count Divider Dropdown Error Boundary Fieldset File Input FlexBox Fluid Image Form Grid Heading (H1–H6)Hidden Left Hand Navigation Link List Listbox Menu Modal Dialog Page Wrappers Pagination Pipe Separator Popover Price Bar Pricing Progress Bar Progressive Image Promo Code Radio Button Range Ratings Stars Responsive Image Search Input Selection Set Skeleton Text Spinner Square Image Container Standard Tile Step Indicator Table Tabs Text Area Text Input Thumbnails Hero Toggle Switch Typography Uncustomizable Markup Visible Visually Hidden Zoom Controls

SWAN
Components
Pricing

Pricing

Styling to display prices.

UsageAPI

On this page

List Price
Pricing Comparison
full Pricing component

The various Pricing components provide common styling for prices. They set color, font weight, and strikethrough text as appropriate, but do not set font size. This allows them to be used in a variety of contexts. Certain components may automatically add context-specific styling to Pricing, e.g. inside a Standard Tile.

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).

The preview has been updated.

ReactVanilla

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

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

<p>Here is a List Price: <span class="swan-list-price">$20.00</span></p>

<p>Here is a List Price: <span class="swan-list-price">$20.00</span></p>

Pricing Comparison

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

The preview has been updated.

ReactVanilla

<P>
  A Pricing Comparison:
  <PricingComparison>
    <ListPrice>$20.00</ListPrice>
    <DiscountPrice>$14.99</DiscountPrice>
  </PricingComparison>
</P>

<P>
  A Pricing Comparison:
  <PricingComparison>
    <ListPrice>$20.00</ListPrice>
    <DiscountPrice>$14.99</DiscountPrice>
  </PricingComparison>
</P>

<p>
  A Pricing Comparison:
  <span class="swan-pricing-comparison">
    <span class="swan-list-price">$20.00</span>
    <span class="swan-discount-price">$14.99</span>
  </span>
</p>

<p>
  A Pricing Comparison:
  <span class="swan-pricing-comparison">
    <span class="swan-list-price">$20.00</span>
    <span class="swan-discount-price">$14.99</span>
  </span>
</p>

Discount Price can also be used by itself (outside of a Pricing Comparison block) to indicate price savings:

The preview has been updated.

ReactVanilla

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

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

<p>
  A Discount Price by itself:
  <span class="swan-discount-price"> You saved $12.34! </span>
</p>

<p>
  A Discount Price by itself:
  <span class="swan-discount-price"> You saved $12.34! </span>
</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"):

The preview has been updated.

ReactVanilla

<P>
  A full Pricing component, with all sub-components:
  <Pricing>
    <PricingOffer>100 Starting at</PricingOffer>
    <PricingComparison>
      <ListPrice>€10.99</ListPrice> <DiscountPrice>€8.99</DiscountPrice>
    </PricingComparison>
    <ShortTaxMessage>Inc. VAT</ShortTaxMessage>
  </Pricing>
</P>

<P>
  A full Pricing component, with all sub-components:
  <Pricing>
    <PricingOffer>100 Starting at</PricingOffer>
    <PricingComparison>
      <ListPrice>€10.99</ListPrice> <DiscountPrice>€8.99</DiscountPrice>
    </PricingComparison>
    <ShortTaxMessage>Inc. VAT</ShortTaxMessage>
  </Pricing>
</P>

<p>
  A full Pricing component, with all sub-components:
  <span class="swan-pricing">
    <span class="swan-pricing-offer">100 Starting at</span>
    <span class="swan-pricing-comparison">
      <span class="swan-list-price">€10.99</span>
      <span class="swan-discount-price">€8.99</span>
    </span>
    <span class="swan-short-tax-message">Inc. VAT</span>
  </span>
</p>

<p>
  A full Pricing component, with all sub-components:
  <span class="swan-pricing">
    <span class="swan-pricing-offer">100 Starting at</span>
    <span class="swan-pricing-comparison">
      <span class="swan-list-price">€10.99</span>
      <span class="swan-discount-price">€8.99</span>
    </span>
    <span class="swan-short-tax-message">Inc. VAT</span>
  </span>
</p>

Props

DiscountPrice

This component is implemented using the <span /> as the root element. You can utilize the native attributes supported by <span /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

PricingComparison

This component is implemented using the <span /> as the root element. You can utilize the native attributes supported by <span /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

PricingOffer

This component is implemented using the <span /> as the root element. You can utilize the native attributes supported by <span /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

Pricing

This component is implemented using the <span /> as the root element. You can utilize the native attributes supported by <span /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

ShortTaxMessage

This component is implemented using the <span /> as the root element. You can utilize the native attributes supported by <span /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

ListPrice

This component is implemented using the <span /> as the root element. You can utilize the native attributes supported by <span /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

Was this page useful?

Thanks for your feedback!

Want to provide more details? (Optional)

Feel free to include your name if you wish to have a follow up conversation.

Published: Jan 31, 2022Last updated: Sep 18, 2024

Price Bar

Progress Bar

Terms of use Privacy policy Legal notice