Skip to main content
All CollectionseWizard.js frameworkEmail components
wiz-divider component in emails
wiz-divider component in emails
eWizard Team avatar
Written by eWizard Team
Updated over a year ago

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

Installation

To install the wiz-divider component, run the following command in your email project root directory:

wiz install @email/wiz-divider

For more information, see Install components.

Usage

NOTE: 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:

<!--./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 :Hexcolorcode:hexcolorcode: as the attribute value. The transparent value hides the divider.

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

• divider-height

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

<wiz-divider :divider-height="2"></wiz-divider>

• divider-length

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

<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.

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

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

Properties

The wiz-divider component has the following properties:

Property

Type

Default

Description

dividerColor

String

#2573ba

The hex code of the divider line color.

dividerHeight

Number

2

The divider line width in pixels.

dividerLength

Number

100

The divider line length from 0 to 100%.

dividerAlign

String

center

The divider line alignment on the page. Other possible values are: left and right. This property requires that dividerLength property value is less than 100%.

For more information, see Component properties.

Did this answer your question?