Skip to main content

MJML Bullet List

Included in Premail

MJML Bullet List is included automatically in Premail. It is also available separately via GitHub and npm for use in any MJML project.

Why a custom component?​

<ul> and <li> HTML elements can be used in HTML emails, but getting them to render consistently takes a little work. This component provides two shortcuts for these elements:

Example use​

<mj-list>
  <mj-li>List item one.</mj-li>
  <mj-li>List item two.</mj-li>
  <mj-li>List item three.</mj-li>
  <mj-li>List item four.</mj-li>
</mj-list>

Not very exciting visually, but created in email-friendly (ugly) HTML so it will reliably render in all email clients.

But you can get more creative. An example of this can be found in the example email's content/body.hbs template:

<mj-text>
  <p>Examples of the custom "mj-list" and "mj-li" tags. Here is a list with an
  option set on the entire list:</p>
</mj-text>
<mj-list background-color="#ddd" border-top="18px #ddd solid">
  <mj-li>List item one.</mj-li>
  <mj-li>List item two.</mj-li>
  <mj-li>List item three.</mj-li>
  <mj-li>List item four.</mj-li>
</mj-list>
<mj-text>
  <p>And here's a list with options set on individual list items:</p>
</mj-text>
<mj-list>
  <mj-li>List item one. Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua.</mj-li>
  <mj-li color="blue">List item two, customized color for the entire list item.</mj-li>
  <mj-li>List item three.</mj-li>
  <mj-li bullet-color="red" padding-left="40px">List item four, customized bullet color and left padding. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
    officia deserunt mollit anim id est laborum.</mj-li>
  <mj-li gutter="20px">List item five, custom gutter size.</mj-li>
  <mj-li>List item six.</mj-li>
  <mj-li text-color="green">List item seven, customized text (only) color. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.</mj-li>
</mj-list>

<mj-list>​

<mj-list> replaces <ul>. Use it alongside <mj-text>, within <mj-column>.

<mj-list> options​

optionunitdetailsdefault value
background-colorcolorApplies to entire listnone
borderstring (border)Applies to entire listnone
border-topstring (border)Applies to entire listnone
border-rightstring (border)Applies to entire listnone
border-bottomstring (border)Applies to entire listnone
border-leftstring (border)Applies to entire listnone
border-radiuspixelsApplies to entire listnone
directionltr, rtlLanguage directionltr
inner-background-colorcolorApplies to entire listnone
paddingpixelsApplies to entire listnone
padding-toppixelsApplies to entire listnone
padding-rightpixelsApplies to entire listnone
padding-bottompixelsApplies to entire listnone
padding-leftpixelsApplies to entire listnone
vertical-aligntop, middle, bottomApplies to entire listtop
widthpixelsApplies to entire listnone (full width of container)

<mj-li>​

<mj-li> replaces <li>. Use it inside <mj-list></mj-list>.

<mj-li> options​

optionunitdetailsdefault value
colorcolorApplies to both bullet marker and textnone (inherited from parent text style)
bullet-colorcolorApplies to bullet marker onlynone (inherited from color)
text-colorcolorApplies to text onlynone (inherited from color)
background-colorcolorApplies to list itemnone
font-familystringApplies to list itemUbuntu, Helvetica, Arial, sans-serif (from <mj-text>)
font-sizepixelsApplies to list item13px (from <mj-text>)
font-stylestringApplies to list itemnone
font-weightstringApplies to list itemnone
gutterpixelsDistance between bullet marker and textdefault set in themeConfig.yaml
letter-spacingpixels (negative allowed)Applies to list itemnone
line-heightnumber, pixels or percentageApplies to list itemnone
padding-rightpixelsApplies to list itemnone
padding-leftpixelsApplies to list itemnone
text-alignleft, center, right, justifyApplies to list itemleft
text-decorationstringApplies to list itemnone
text-transformstringApplies to list itemnone
vertical-aligntop, middle, bottomApplies to list itemtop