# Hero

# Most common usage scenario

NOT YET DOCUMENTED

This section is not fully documented yet. We are doing our best to make our documentation a good and complete source of knowledge about Storefront UI. If you would like to help us, please don't hesitate to contribute to our docs. You can read more about it here.

# 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--position-bg-top-right
  • .sf-hero-item--position-bg-bottom-right
  • .sf-hero-item--position-bg-bottom-left
  • .sf-hero-item--align-right

# SCSS variables

$hero__controls-top: 50% !default;
$hero__controls-padding-h: 1rem !default;
$hero__controls-width: calc(100% - 2 * #{$hero__controls-padding-h}) !default;
$hero__bullets-position-offset: 0.5rem !default;
$hero__bullets-position-offset-desktop: 2.5rem !default;
$hero-item-width: 100% !default;
$hero-item-padding: $spacer-extra-big !default;
$hero-item-padding-desktop: 5rem !default;
$hero-item-bg-size: cover !default;
$hero-item-bg-position: top left !default;
$hero-item-bg-repeat: no-repeat !default;
$hero-item-font-weight: 500 !default;
$hero-item-line-height: 1.6 !default;
$hero-item__container-width-desktop: 50% !default;
$hero-item__container-width: 60% !default;
$hero-item__container-height: 100% !default;
$hero-item__container-padding-desktop: 0 2rem !default;
$hero-item__container-padding: 0 !default;
$hero-item__subtitle-width: 100% !default;
$hero-item__subtitle-width-desktop: min-content !default;
$hero-item__subtitle-color: $c-gray-secondary !default;
$hero-item__subtitle-border-left: $hero-item__subtitle-color solid 1px !default;
$hero-item__subtitle-border: 0 !default;
$hero-item__subtitle-font-family: $body-font-family-primary !default;
$hero-item__subtitle-font-size: $font-size-extra-small-mobile !default;
$hero-item__subtitle-font-size-desktop: $font-size-extra-small-desktop !default;
$hero-item__subtitle-padding-left-desktop: 36px !default;
$hero-item__subtitle-padding-left: 18px !default;
$hero-item__title-font-desktop: 36px !default;
$hero-item__title-color: $c-dark-primary !default;
$hero-item__title-font-family: $body-font-family-primary !default;
$hero-item__title-font-size: $font-size-extra-big-mobile !default;
$hero-item__title-font-size-desktop: $h1-font-size-desktop !default;
$hero-item__title-line-height: 1.38 !default;

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

# 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: string
    • defaultValue: ""

# Slots

  • subtitle

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

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

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

# Events

None.

# CSS modifiers

None.

# SCSS variables

None.

# 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/organisms/SfHero/SfHero.html"></template>
<script src="@storefront-ui/vue/src/components/organisms/SfHero/SfHero.js"></script>
<style lang="scss">
@import "~@storefront-ui/shared/styles/components/SfHero.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.