Skip to content

wiz-divider ​

The wiz-divider component is a horizontal HTML element that visually separates paragraphs and content blocks. For more information, see Divider.

Usage ​

As best practice, use eWizard Editor to add and edit the components.

Add the wiz-divider component to your email and change its properties in the App.vue file:

html
<!--./App.vue -->

<template>
<div>
  <wiz-root align="center" style="background: #ffffff; width: 700px;">
    <wiz-divider align="center" divider-color="transparent" :divider-height="0"></wiz-divider>
  </wiz-root>
</div>
</template>

Attributes ​

You can change the wiz-divider component appearance and behavior using the following attributes within the <wiz-divider></wiz-divider> tag:

  • divider-color

    To change the divider color, enter the hex color code as the attribute value. The transparent value hides the divider.

    html
    <wiz-divider divider-color="#2573ba"></wiz-divider>
  • divider-height

    To change the divider line width, enter the attribute value in pixels.

    html
    <wiz-divider :divider-height="2"></wiz-divider>
  • divider-length

    To change the divider line length, enter the attribute value in percents.

    html
    <wiz-divider :divider-length="50"></wiz-divider>
  • divider-align

    To change the divider line alignment on the page, enter the left, right, or center values in the attribute.

    html
    <wiz-divider divider-align="left" :divider-length="50"></wiz-divider>

    Change the divider-length value to less than 100% to set the divider alignment.

Properties ​


The following properties are available:
PropertyTypeDefault valueDescription
dividerAlignnumbercenterThe divider line alignment in the email. One of: center, left, right. For this property, dividerLength must be < 100.
dividerColorstring#2573baThe hex code of the divider line color.
dividerHeightnumber2The divider line height in pixels.
dividerLengthnumber100The divider line length in pixels. Must be 0 – 100.