# Footer

Footer component.

# Most common usage scenario

<template>
  <SfFooter
    :column="column"
    :multiple="multiple"
    style="max-width: 64rem; margin-left: auto; margin-right: auto"
  >
    <SfFooterColumn title="About us">
      <SfList>
        <SfListItem v-for="item in aboutUs" :key="item">
          <SfMenuItem class="sf-footer__menu-item" :label="item" />
        </SfListItem>
      </SfList>
    </SfFooterColumn>
    <SfFooterColumn title="Departments">
      <SfList>
        <SfListItem v-for="item in departments" :key="item">
          <SfMenuItem class="sf-footer__menu-item" :label="item" />
        </SfListItem>
      </SfList>
    </SfFooterColumn>
    <SfFooterColumn title="Help">
      <SfList>
        <SfListItem v-for="item in help" :key="item">
          <SfMenuItem class="sf-footer__menu-item" :label="item" />
        </SfListItem>
      </SfList>
    </SfFooterColumn>
    <SfFooterColumn title="Payment & delivery">
      <SfList>
        <SfListItem v-for="item in paymentsDelivery" :key="item">
          <SfMenuItem class="sf-footer__menu-item" :label="item" />
        </SfListItem>
      </SfList>
    </SfFooterColumn>
    <SfFooterColumn title="Social" style="margin-left: auto">
      <div :style="style">
        <img
          v-for="item in social"
          :src="'/assets/storybook/SfFooter/' + item + '.svg'"
          style="height: 0.75rem; margin-right: 1.25rem"
        />
      </div>
    </SfFooterColumn>
  </SfFooter>
</template>

<script>
import { SfFooter } from "@storefront-ui/vue";
import { SfList } from "@storefront-ui/vue";
import { SfMenuItem } from "@storefront-ui/vue";
import { SfImage } from "@storefront-ui/vue";

export default {
  components: {
    SfFooter,
    SfList,
    SfMenuItem,
    SfImage
  },
  data() {
    return {
      aboutUs: ["Who we are", "Quality in the details", "Customer Reviews"],
      departments: ["Women fashion", "Men fashion", "Kidswear", "Home"],
      help: ["Customer service", "Size guide", "Contact us"],
      paymentsDelivery: ["Purchase terms", "Guarantee"],
      social: ["facebook", "pinterest", "twitter", "youtube"],
      isMobile: false,
      desktopMin: 1024,
      column: 4,
      multiple: true
    };
  }
};
</script>

# Props

  • column

    • type: number
    • defaultValue: 4
  • multiple

    • type: boolean
    • defaultValue: true

# Slots

  • default

# Events

  • change

# CSS modifiers

None.

# SCSS variables

$footer-desktop-margin: 6.25rem 0 !default;
$footer-column__title-padding: $spacer-big $spacer-extra-big !default;
$footer-column__title-desktop-padding: $spacer-big 0 !default;
$footer-column__title-background-color: hsl(0%, 0%, 90%) !default;
$footer-column__title-font-family: $body-font-family-secondary !default;
$footer-column__title-font-size: $font-size-regular-mobile !default;
$footer-column__title-desktop-font-size: $font-size-big-desktop !default;
$footer-column__title-font-weight: 500 !default;
$footer__menu-item-font-size: $font-size-regular-mobile !default;
$footer__menu-item-desktop-font-size: $font-size-regular-desktop !default;

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

# Internal components

# FooterColumn

# Props

  • title
    • type: string
    • defaultValue: ""

# Slots

  • default

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