# Heading

Heading component for titles with optional description

# Most common usage scenario

<template>
  <SfHeading
    :class="customClass"
    :level="level"
    :title="title"
    :description="description"
  />
</template>
<script>
import { SfHeading } from "@storefront-ui/vue";
export default {
  components: {
    SfHeading,
  },
  data() {
    return {
      level: 3,
      title: "Share Your Look",
      description: "#YOURLOOK",
    };
  },
};
</script>

# Props

  • level

    • Heading level
    • type: number
    • defaultValue: 2
  • title

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

    • Heading description
    • type: string
    • defaultValue: ""

# Slots

  • title

    • Heading title. Slot content will replace default <h> tag
    • bindings: title
  • description

    • Heading description. Slot content will replace default <div> tag
    • bindings: description

# Events

None.

# CSS modifiers

  • .sf-heading--underline
  • .sf-heading--left
  • .sf-heading--right

# CSS custom properties (variables)

  • --heading-padding
  • --heading-text-align
  • --heading-title-margin
  • --heading-title-color
  • --heading-title-font
  • --heading-title-font-weight
  • --heading-title-font-size
  • --heading-title-font-line-height
  • --heading-title-font-family
  • --heading-description-margin
  • --heading-description-color
  • --heading-description-font
  • --heading-description-font-weight
  • --heading-description-font-size
  • --heading-description-font-line-height
  • --heading-description-font-family
  • --heading-border
  • --heading-border-width

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