# Divider

Divider component

# Most common usage scenario


Some content.
Other content.
<template>
  Some content.
  <SfDivider />
  Other content.
</template>
<script>
import { SfDivider } from "@storefront-ui/vue";

export default {
  components: {
    SfDivider
  }
};
</script>

# Props

None.

# Slots

None.

# Events

None.

# CSS modifiers

None.

# SCSS variables

$divider-border-color: $c-light-primary !default;

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

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