# Characteristic

Component with icon and text used for describing product characteristics.

# Most common usage scenario

<template>
  <SfCharacteristic
    :title="title"
    :description="description"
    :icon="icon"
    :size-icon="sizeIcon"
    :color-icon="colorIcon"
  />
</template>
<script>
import { SfCharacteristic } from "@storefront-ui/vue";
export default {
  components: {
    SfCharacteristic,
  },
  data() {
    return {
      title: "Safety",
      description: "It carefully packaged with a personal touch",
      icon: "safety",
      sizeIcon: "",
      colorIcon: "",
    };
  },
};
</script>

# Props

  • colorIcon

    • One of predefined SfIcon colors, default is black.
    • type: string
    • defaultValue: ""
  • sizeIcon

    • One of predefined SfIcon sizes.
    • type: string
    • defaultValue: ""
  • icon

    • Svg file iconPath
    • type: string|array
    • defaultValue: ""
  • title

    • Characteristic title
    • type: string
    • defaultValue: ""
  • description

    • Characteristic description
    • type: string
    • defaultValue: ""

# Slots

  • icon

    • Icon. Slot content will replace SfIcon atom component
    • bindings: colorIcon, sizeIcon, icon
  • text

    • Characteristic text. Slot content will replace default title and description text
    • bindings: title, description
  • title

    • Characteristic title. Slot content will replace default title text
    • bindings: title
  • description

    • Characteristic description. Slot content will replace default description text
    • bindings: description

# Events

None.

# CSS modifiers

None.

# CSS custom properties (variables)

  • --characteristic-margin
  • --characteristic-title-font
  • --characteristic-title-font-weight
  • --characteristic-title-font-size
  • --characteristic-title-font-line-height
  • --characteristic-title-font-family
  • --characteristic-description-font
  • --characteristic-description-font-weight
  • --characteristic-description-font-size
  • --characteristic-description-font-line-height
  • --characteristic-description-font-family

# Overridden other components CSS variables

  • --icon-color
  • --icon-size

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.