# Property

Component for listing properties of a product.

# Most common usage scenario

<template>
  <SfProperty :class="customClass" :name="name" :value="value" />
</template>
<script>
import { SfProperty } from "@storefront-ui/vue";
export default {
  components: {
    SfProperty,
  },
  data() {
    return {
      name: "Material",
      value: "Cotton",
    };
  },
};
</script>

# Props

  • name

    • type: string
    • defaultValue: ""
  • value

    • type: string|number
    • defaultValue: ""

# Slots

  • name

    • Use this slot to replace property name
    • bindings: name
  • value

    • Use this slot to replace property value
    • bindings: value

# Events

None.

# CSS modifiers

  • .sf-property--large
  • .sf-property--full-width
  • .sf-property--value-in-middle
  • .sf-property--without-suffix

# CSS custom properties (variables)

  • --property-color
  • --property-name-margin
  • --property-name-color
  • --property-name-text-transform
  • --property-name-font
  • --property-name-font-weight
  • --property-name-font-size
  • --property-name-font-line-height
  • --property-name-font-family
  • --property-name-content
  • --property-value-color
  • --property-value-font
  • --property-value-font-weight
  • --property-value-font-size
  • --property-value-font-line-height
  • --property-value-font-family

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