# ContentPages

Content Pages for static content

# Most common usage scenario


Help

Security
This website ("website") is operated by Luma Inc., which includes Luma stores, and Luma Private Sales. This privacy policy only covers information collected at this website, and does not cover any information collected offline by Luma. All Luma websites are covered by this privacy policy.
Privacy Policy
This website ("website") is operated by Luma Inc., which includes Luma stores, and Luma Private Sales. This privacy policy only covers information collected at this website, and does not cover any information collected offline by Luma. All Luma websites are covered by this privacy policy.
<template>
  <SfContentPages 
    title="Help"
    :active="activePage"
    @click:change="updateActivePage"
  >
    <SfContentPage title="About us">
      <SfTabs :open-tab="1">
        <SfTab title="Security">
          This website ("website") is operated by Luma Inc.
        </SfTab>
        <SfTab title="Privacy Policy">
          This website ("website") is operated by Luma Inc.
        </SfTab>
        <SfTab title="Additional Information ">
          This website ("website") is operated by Luma Inc.
        </SfTab>
      </SfTabs>
    </SfContentPage>
    <SfContentPage title="Customer service">
      <SfTabs :open-tab="1">
        <SfTab title="Size guide">
          This website ("website") is operated by Luma Inc.
        </SfTab>
        <SfTab title="Where's my order?">
          This website ("website") is operated by Luma Inc.
        </SfTab>
      </SfTabs>
    </SfContentPage>
    <SfContentPage title="Store locator">
      This website ("website") is operated by Luma Inc.
    </SfContentPage>
  </SfContentPages>
</template>
<script>
import { SfContentPages, SfTabs } from "@storefront-ui/vue";
export default {
  components: { SfContentPages, SfTabs },
  data(){
      return {
        activePage: "About us"
      };
  },
  methods: {
    updateActivePage(title) {
      this.activePage = title;
    }
  }
}
</script>

# Props

  • title

    • Pages title
    • type: string
    • defaultValue: ""
  • active

    • Active page
    • type: string
    • defaultValue: ""

# Slots

  • menu-item

    • Custom menu-item markup
    • bindings: updatePage, page, active
  • default

    • Slot for Content Page

# Events

  • click:change
    • Active page updated event

# CSS modifiers

  • .sf-content-pages__section--is-active

# SCSS variables

$content-pages__sidebar-width: 18.4375rem !default;
$content-pages__sidebar-background-color: $c-light !default;
$content-pages__title-font-family: $heading-font-family !default;
$content-pages__title-font-size: $font-size-big-mobile !default;
$content-pages__title-font-size-desktop: $font-size-extra-big-desktop !default;
$content-pages__title-font-weight: 500 !default;
$content-pages__title-line-height: 1.6 !default;

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

# Internal components

# ContentCategory

# Props

  • title
    • Category title
    • type: string
    • defaultValue: ""

# Slots

  • default

# Events

None.

# CSS modifiers

None.

# SCSS variables

None.

# ContentPage

# Props

  • title

    • Page title
    • type: string
    • defaultValue: ""
  • icon

    • Page nav title
    • type: string
    • defaultValue: ""

# Slots

  • default
    • Custom page markup

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