# Price

Price information component with optional display of previous price.

# Most common usage scenario


$75 $99.99
<template>
  <SfPrice :regular="priceRegular" :special="priceSpecial" />
</template>
<script>
import { SfPrice } from "@storefront-ui/vue";

export default {
  components: {
    SfPrice
  },
  data() {
    return {
      priceRegular: "$99.99",
      priceSpecial: "$75",
    };
  }
};
</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

  • special

    • Custom special price
    • bindings: special
  • old

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

    • Custom regular price
    • bindings: regular, special

# Events

None.

# CSS modifiers

  • .sf-price--big

# SCSS variables

$price-font-family: $body-font-family-primary !default;
$price-font-size: $font-size-big-mobile !default;
$price-font-size-desktop: $font-size-big-desktop !default;
$price-font-weight: $body-font-weight-secondary !default;
$price-line-height: 1.6 !default;
$price__old-font-size: $font-size-small-mobile !default;
$price__old-font-size-desktop: $font-size-small-desktop !default;
$price--big-font-size: $font-size-big-desktop !default;
$price--big-font-size-desktop: $font-size-extra-big-desktop !default;
$price--big__old-font-size: $font-size-regular-mobile !default;
$price--big__old-font-size-desktop: $font-size-regular-desktop !default;

You can override SCSS variable values bound to this component in sfui.scss in the root of your project.

# Partials

If you want to customize this component even more you can use its partials for limitless customization.

<template lang="html" src="@storefront-ui/vue/src/components/atoms/SfPrice/SfPrice.html"></template>
<script src="@storefront-ui/vue/src/components/atoms/SfPrice/SfPrice.js"></script>
<style lang="scss">
@import "~@storefront-ui/shared/styles/components/SfPrice.scss";
</style>

You can read about using component partials here

# Play with this component

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