# Hero

Full-width hero component with autoplay and navigation arrows.

# Most common usage scenario

<template>
  <SfHero :style="{ maxWidth: '1240px', margin: 'auto' }">
    <SfHeroItem
      :class="customClass"
      :title="title"
      :subtitle="subtitle"
      :button-text="buttonText"
      :image="image"
      :background="background"
    />
    <SfHeroItem
      :class="customClass"
      title="Colorful summer dresses are already in store"
      subtitle="Summer Collection 2019"
      button-text="Learn more"
      image="/assets/storybook/SfHero/hero.png"
      background="#FCE4EC"
    />
  </SfHero>
</template>
<script>
import { SfHero } from "@storefront-ui/vue";
export default {
  components: {
    SfHero,
  },
  data() {
    return {
      title: "Colorful summer dresses are already in store",
      subtitle: "Summer Collection 2019",
      buttonText: "Learn more",
      image: {
        mobile: "/assets/storybook/SfHero/hero.png",
        desktop: "/assets/storybook/SfHero/hero.png",
      },
      background: "#ECEFF1",
    };
  },
};
</script>

# Props

  • sliderOptions
    • Slider options like glide.js (https://glidejs.com/docs/)
    • type: object
    • defaultValue: {}

# Slots

  • default

    • default slot for SfHeroItem tags
  • prev

    • slot for icon moving to the previous item
    • bindings: go
  • next

    • slot for icon moving to the next item
    • bindings: go
  • bullets

    • custom markup for pagination bullets
    • bindings: numberOfPages, page, go

# Events

None.

# CSS modifiers

  • .sf-hero-item--align-right
  • .sf-hero-item--position-bg-top-right
  • .sf-hero-item--position-bg-bottom-right
  • .sf-hero-item--position-bg-bottom-left

# CSS custom properties (variables)

  • --hero-item-flex-direction
  • --hero-item-align-items
  • --hero-item-justify-content
  • --hero-item-height
  • --hero-item-width
  • --hero-item-padding
  • --hero-item-color
  • --hero-item-background
  • --hero-item-background-size
  • --hero-item-container-width
  • --hero-item-subtitle-margin
  • --hero-item-subtitle-color
  • --hero-item-subtitle-font
  • --hero-item-subtitle-font-weight
  • --hero-item-subtitle-font-size
  • --hero-item-subtitle-font-line-height
  • --hero-item-subtitle-font-family
  • --hero-item-subtitle-transform
  • --hero-item-title-margin
  • --hero-item-title-color
  • --hero-item-title-font
  • --hero-item-title-font-weight
  • --hero-item-title-font-size
  • --hero-item-title-font-line-height
  • --hero-item-title-font-family
  • --hero-item-title-transform
  • --hero-item-button-display
  • --_hero-item-background-image

# Overridden other components CSS variables

  • --hero-item-font
  • --h1-font-size
  • --hero-controls-display
  • --hero-bullets-display

You can override CSS variables values bound to this component.

# Internal components

# HeroItem

# Props

  • title

    • Hero item title
    • type: string
    • defaultValue: ""
  • subtitle

    • Hero item subtitle (at the top)
    • type: string
    • defaultValue: ""
  • buttonText

    • text that will be displayed inside the button. You can replace the button with "call-to-action" slot
    • type: string
    • defaultValue: ""
  • background

    • Background color
    • type: string
    • defaultValue: ""
  • image

    • Background image path
    • type: object|string
    • defaultValue: ""

# Slots

  • subtitle

    • hero item subtitle. Slot content will replace default <h2> tag
    • bindings: subtitle
  • title

    • hero item title. Slot content will replace default <h1> tag
    • bindings: title
  • call-to-action

    • Call to action section. Slot content will replace default SfButton component
    • bindings: buttonText

# Events

None.

# CSS modifiers

None.

# CSS variables

None.

# Play with this component

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