# Banner

Banner component which features various text levels, a background and a button.

# Most common usage scenario

<template>
  <div style="max-width: 77.5rem;">
    <SfBanner
      :class="customClass"
      :title="title"
      :subtitle="subtitle"
      :description="description"
      :button-text="buttonText"
      :image="image"
      :background="background"
    />
  </div>
</template>
<script>
import { SfBanner } from "@storefront-ui/vue";
export default {
  components: {
    SfBanner,
  },
  data() {
    return {
      title: "Eco Sandals",
      subtitle: "Summer shoes",
      description:
        "The collection features formal and casual comfort shoes with a Danish design focus. Made from premium leathers and comfort.",
      buttonText: "Shop Now",
      image: {
        mobile: "/assets/storybook/SfBanner/Banner2.jpg",
        desktop: "/assets/storybook/SfBanner/Banner2.jpg",
      },
      background: "#e1e3e2",
    };
  },
};
</script>

# Props

  • title

    • Banner title
    • type: string
    • defaultValue: ""
  • subtitle

    • Banner subtitle (at the top)
    • type: string
    • defaultValue: ""
  • description

    • 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 in HEX (eg #FFFFFF)
    • type: string
    • defaultValue: ""
  • image

    • Background image. Influenced by $banner-background-size, $banner-background-position CSS props.
    • type: string|object
    • defaultValue: ""

# Slots

  • subtitle

    • bindings: subtitle
  • title

    • bindings: title
  • description

    • bindings: description
  • call-to-action

    • bindings: buttonText

# Events

None.

# CSS modifiers

  • .sf-banner--right

# CSS custom properties (variables)

  • --banner-display
  • --banner-align-items
  • --banner-justify-content
  • --banner-height
  • --banner-width
  • --banner-padding
  • --banner-background
  • --banner-background-size
  • --banner-container-width
  • --banner-container-justify-content
  • --banner-container-align-items
  • --banner-container-flex-direction
  • --banner-subtitle-margin
  • --banner-color
  • --banner-subtitle-font
  • --banner-subtitle-font-weight
  • --banner-subtitle-font-size
  • --banner-subtitle-font-line-height
  • --banner-subtitle-font-family
  • --banner-subtitle-text-transform
  • --banner-title-margin
  • --banner-title-font
  • --banner-title-font-weight
  • --banner-title-font-size
  • --banner-title-font-line-height
  • --banner-title-font-family
  • --banner-title-text-transform
  • --banner-display-description
  • --banner-description-margin
  • --banner-description-font
  • --banner-description-font-weight
  • --banner-description-font-size
  • --banner-description-font-line-height
  • --banner-description-font-family
  • --banner-display-call-to-action
  • --_banner-background-image

# Overridden other components CSS variables

  • --banner-background-position
  • --banner-subtitle-color
  • --button-padding

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.