Back to Mjml

README

packages/mjml-divider/README.md

5.1.02.1 KB
Original Source

mj-divider

Displays a horizontal divider that can be customized like a HTML border.

xml
<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-divider border-width="1px" border-style="dashed" border-color="lightgrey" />
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Attributes

attributeacceptsdescriptiondefault value
alignleft center righthorizontal alignmentcenter
border-colorCSS color formatsdivider color#000000
border-stylestringCSS values, e.g. dashed dotted solidsolid
border-widthpxdivider's border width4px
container-background-colorCSS color formatsinner element background color
css-classstringclass name, added to the root HTML element created
paddingpx %divider padding, supports up to 4 parameters10px 25px
padding-bottompx %divider bottom padding
padding-leftpx %divider left padding
padding-rightpx %divider right padding
padding-toppx %divider top padding
widthpx %divider width100%
<p class="cta-container"><a class="cta" href="https://mjml.io/try-it-live/components/divider">Try it live</a></p>