# Price

Price information component with optional display of previous price.

# Most common usage scenario

<template>
  <SfPrice :regular="regular" :special="special" />
</template>
<script>
import { SfPrice } from "@storefront-ui/vue";
export default {
  components: {
    SfPrice,
  },
  data() {
    return {
      regular: "$200.00",
      special: "$100.00",
    };
  },
};
</script>

# Props

  • regular

    • Regular/old price value. Crossed out if special is provided
    • type: string|number
    • defaultValue: null
  • special

    • Special price value
    • type: string|number
    • defaultValue: null

# Slots

  • regular

    • Custom regular price
    • bindings: regular, special
  • old

    • Custom old price (value from regular)
    • bindings: regular, special
  • special

    • Custom special price
    • bindings: special

# Events

None.

# CSS modifiers

None.

# CSS custom properties (variables)

  • --price-flex-wrap
  • --price-flex-direction
  • --price-align-items
  • --price-justify-content
  • --price-regular-margin
  • --price-regular-color
  • --price-regular-font
  • --price-regular-font-weight
  • --price-regular-font-size
  • --price-regular-font-line-height
  • --price-regular-font-family
  • --price-regular-text-decoration
  • --price-special-margin
  • --price-special-color
  • --price-special-font
  • --price-special-font-weight
  • --price-special-font-size
  • --price-special-font-line-height
  • --price-special-font-family
  • --price-special-text-decoration
  • --price-old-margin
  • --price-old-color
  • --price-old-font
  • --price-old-font-weight
  • --price-old-font-size
  • --price-old-font-line-height
  • --price-old-font-family
  • --price-old-text-decoration

# Overridden other components CSS variables

None.

You can override CSS variables values bound to this component.

# Play with this component

See all available configurations and play with this component on Storybook.