# Section

Full-width section for content.

# Most common usage scenario

<template>
  <SfSection
    :title-heading="titleHeading"
    :subtitle-heading="subtitleHeading"
    :level-heading="levelHeading"
  >
    <div
      style="
        display: flex;
        align-items: center;
        justify-content: center;
        height: 18.75rem;
        background-color: #f2f2f2;
      "
    >
      [#default slot content]
    </div>
  </SfSection>
</template>
<script>
import { SfSection } from "@storefront-ui/vue";
export default {
  components: {
    SfSection
  },
  data() {
    return {
      titleHeading: "Share your look",
subtitleHeading: "#YOURLOOK",
level-heading: 2
    }
  }
};
</script>

# Props

  • titleHeading

    • Heading title
    • type: string
    • defaultValue: ""
  • subtitleHeading

    • Heading subtitle
    • type: string
    • defaultValue: ""
  • levelHeading

    • Heading tag level
    • type: number
    • defaultValue: 2

# Slots

  • heading

    • Section heading. Slot content will replace default <sf-heading> component
    • bindings: levelHeading, titleHeading, subtitleHeading
  • default

    • Section content.

# Events

None.

# CSS modifiers

None.

# CSS custom properties (variables)

  • --section-margin
  • --section-content-margin

# Overridden other components CSS variables

None.

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.