example.mjml

<mjml>
  <mj-head>
    <!-- You should always include this attributes section for accessibility
         reasons. See https://github.com/premail/mjml-bullet-list#mjml-head -->
    <mj-html-attributes>
      <mj-selector path=".list table table">
        <mj-html-attribute name="role">list</mj-html-attribute>
      </mj-selector>
      <mj-selector path=".list table table > tbody">
        <mj-html-attribute name="role">presentation</mj-html-attribute>
      </mj-selector>
    </mj-html-attributes>
    <!-- This sets attributes for the entire email. See
         https://documentation.mjml.io/#mj-attributes -->
    <mj-attributes>
      <mj-all
        font-size="16px"
        color="#333"
        font-family="-apple-system, BlinkMacSystemFont, Segoe UI, Liberation Sans, Helvetica, Arial, sans-serif"
      />
    </mj-attributes>

    <!-- These CSS styles will be automatically applied and inlined by MJML.
         See https://documentation.mjml.io/#mj-style -->
    <!-- prettier-ignore -->
    <mj-style inline="inline">
      .list {
      }
      .list-item {
      }
    </mj-style>
  </mj-head>

  <mj-body>
    <mj-section>
      <mj-column>
        <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">
          <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-column>
    </mj-section>
  </mj-body>
</mjml>