<!-- wp:heading {"textAlign":"center","level":1,"align":"full","textColor":"luminous-vivid-orange","style":{"elements":{"link":{"color":{"text":"var:preset|color|luminous-vivid-orange"}}},"color":{"background":"#f0f0f0"}}} -->
<h1
  class="wp-block-heading alignfull has-text-align-center has-luminous-vivid-orange-color has-text-color has-background has-link-color"
  style="background-color: #f0f0f0"
>
  Sample Newsletter
</h1>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns">
  <!-- wp:column {"style":{"spacing":{"padding":{"right":"10px","left":"10px"}}}} -->
  <div class="wp-block-column" style="padding-right: 10px; padding-left: 10px">
    <!-- wp:heading {"backgroundColor":"pale-cyan-blue","style":{"spacing":{"padding":{"right":"var:preset|spacing|20","left":"var:preset|spacing|20"}}}} -->
    <h2
      class="wp-block-heading has-pale-cyan-blue-background-color has-background"
      style="
        padding-right: var(--wp--preset--spacing--20);
        padding-left: var(--wp--preset--spacing--20);
      "
    >
      1 Column Part
    </h2>
    <!-- /wp:heading -->

    <!-- wp:paragraph -->
    <p>
      A one-column layout is great for simplified and concise content, like
      announcements or newsletters with brief updates. Drag blocks to add
      content and customize your styles from the styles panel on the top right.
    </p>
    <!-- /wp:paragraph -->

    <!-- wp:image {"sizeSlug":"large"} -->
    <figure class="wp-block-image size-large">
      <img src="https://picsum.photos/id/133/600/300" alt="" />
    </figure>
    <!-- /wp:image -->

    <!-- wp:buttons {"layout":{"justifyContent":"center"}} -->
    <div class="wp-block-buttons">
      <!-- wp:button {"backgroundColor":"pale-cyan-blue","textColor":"black","width":100,"style":{"elements":{"link":{"color":{"text":"var:preset|color|black"}}}}} -->
      <div class="wp-block-button has-custom-width wp-block-button__width-100">
        <a
          class="wp-block-button__link has-black-color has-pale-cyan-blue-background-color has-text-color has-background has-link-color wp-element-button"
          >Button</a
        >
      </div>
      <!-- /wp:button -->
    </div>
    <!-- /wp:buttons -->
  </div>
  <!-- /wp:column -->
</div>
<!-- /wp:columns -->

<!-- wp:heading {"textAlign":"center","align":"full","style":{"color":{"background":"#f0f0f0"},"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"0","right":"0"}}}} -->
<h2
  class="wp-block-heading alignfull has-text-align-center has-background"
  style="
    background-color: #f0f0f0;
    padding-top: var(--wp--preset--spacing--20);
    padding-right: 0;
    padding-bottom: var(--wp--preset--spacing--20);
    padding-left: 0;
  "
>
  2 Columns Part
</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontFamily":"comic-sans-ms"} -->
<p class="has-comic-sans-ms-font-family">
  A two-column layout organizes information into sections, making it easier for
  users to navigate content. Try other layouts by adding or removing columns,
  drag blocks into them to add content and customize your email styles from the
  styles panel.
</p>
<!-- /wp:paragraph -->

<!-- wp:columns -->
<div class="wp-block-columns">
  <!-- wp:column -->
  <div class="wp-block-column">
    <!-- wp:image {"width":"280px","sizeSlug":"large","align":"left"} -->
    <figure class="wp-block-image alignleft size-large is-resized">
      <img
        src="https://picsum.photos/id/133/300/200"
        alt=""
        style="width: 280px"
      />
    </figure>
    <!-- /wp:image -->
  </div>
  <!-- /wp:column -->

  <!-- wp:column {"width":"300px","style":{"spacing":{"padding":{"right":"0","left":"0"}}}} -->
  <div
    class="wp-block-column"
    style="padding-right: 0; padding-left: 0; flex-basis: 300px"
  >
    <!-- wp:image {"width":"280px","sizeSlug":"large","align":"right"} -->
    <figure class="wp-block-image alignright size-large is-resized">
      <img
        src="https://picsum.photos/id/133/300/200"
        alt=""
        style="width: 280px"
      />
    </figure>
    <!-- /wp:image -->
  </div>
  <!-- /wp:column -->
</div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns">
  <!-- wp:column -->
  <div class="wp-block-column">
    <!-- wp:heading {"level":3,"textColor":"vivid-red","style":{"elements":{"link":{"color":{"text":"var:preset|color|vivid-red"}}}}} -->
    <h3
      class="wp-block-heading has-vivid-red-color has-text-color has-link-color"
    >
      Heading 2
    </h3>
    <!-- /wp:heading -->

    <!-- wp:paragraph {"style":{"typography":{"fontStyle":"italic","fontWeight":"700"}}} -->
    <p style="font-style: italic; font-weight: 700">
      You can also add text blocks into a column next to
      <mark
        style="background-color: #dc2d2d"
        class="has-inline-color has-white-color"
        >an image block</mark
      >
      to create unique layouts.
    </p>
    <!-- /wp:paragraph -->

    <!-- wp:buttons {"layout":{"justifyContent":"right"}} -->
    <div class="wp-block-buttons">
      <!-- wp:button {"backgroundColor":"pale-cyan-blue","textColor":"contrast","width":50,"style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}}} -->
      <div class="wp-block-button has-custom-width wp-block-button__width-50">
        <a
          class="wp-block-button__link has-contrast-color has-pale-cyan-blue-background-color has-text-color has-background has-link-color wp-element-button"
          >Button</a
        >
      </div>
      <!-- /wp:button -->
    </div>
    <!-- /wp:buttons -->
  </div>
  <!-- /wp:column -->

  <!-- wp:column {"width":"300px","style":{"spacing":{"padding":{"right":"0","left":"0"}}}} -->
  <div
    class="wp-block-column"
    style="padding-right: 0; padding-left: 0; flex-basis: 300px"
  >
    <!-- wp:image {"width":"280px","height":"auto","sizeSlug":"large","align":"right"} -->
    <figure class="wp-block-image alignright size-large is-resized">
      <img
        src="https://picsum.photos/id/133/300/200"
        alt=""
        style="width: 280px; height: auto"
      />
    </figure>
    <!-- /wp:image -->
  </div>
  <!-- /wp:column -->
</div>
<!-- /wp:columns -->

<!-- wp:columns {"style":{"spacing":{"padding":{"right":"var:preset|spacing|10","left":"var:preset|spacing|10"}}}} -->
<div
  class="wp-block-columns"
  style="
    padding-right: var(--wp--preset--spacing--10);
    padding-left: var(--wp--preset--spacing--10);
  "
>
  <!-- wp:column -->
  <div class="wp-block-column">
    <!-- wp:heading {"textAlign":"center","level":4} -->
    <h4 class="wp-block-heading has-text-align-center">Product 1</h4>
    <!-- /wp:heading -->

    <!-- wp:image {"width":"150px","sizeSlug":"large","align":"center"} -->
    <figure class="wp-block-image aligncenter size-large is-resized">
      <img
        src="https://picsum.photos/id/36/180/200"
        alt=""
        style="width: 150px"
      />
    </figure>
    <!-- /wp:image -->

    <!-- wp:list -->
    <ul>
      <!-- wp:list-item -->
      <li>Item 1</li>
      <!-- /wp:list-item -->

      <!-- wp:list-item -->
      <li>
        Item 2
        <!-- wp:list {"textColor":"vivid-red","style":{"elements":{"link":{"color":{"text":"var:preset|color|vivid-red"}}},"typography":{"fontStyle":"italic","fontWeight":"400"}}} -->
        <ul
          style="font-style: italic; font-weight: 400"
          class="has-vivid-red-color has-text-color has-link-color"
        >
          <!-- wp:list-item -->
          <li>Item A</li>
          <!-- /wp:list-item -->

          <!-- wp:list-item -->
          <li>Item B</li>
          <!-- /wp:list-item -->
        </ul>
        <!-- /wp:list -->
      </li>
      <!-- /wp:list-item -->
    </ul>
    <!-- /wp:list -->
  </div>
  <!-- /wp:column -->

  <!-- wp:column -->
  <div class="wp-block-column">
    <!-- wp:heading {"textAlign":"center","level":4} -->
    <h4 class="wp-block-heading has-text-align-center">Product 2</h4>
    <!-- /wp:heading -->

    <!-- wp:image {"width":"150px","sizeSlug":"large","align":"center"} -->
    <figure class="wp-block-image aligncenter size-large is-resized">
      <img
        src="https://picsum.photos/id/36/180/200"
        alt=""
        style="width: 150px"
      />
    </figure>
    <!-- /wp:image -->

    <!-- wp:list {"style":{"typography":{"textDecoration":"none"}}} -->
    <ul style="text-decoration: none">
      <!-- wp:list-item -->
      <li>Item 1</li>
      <!-- /wp:list-item -->

      <!-- wp:list-item -->
      <li>
        Item 2
        <!-- wp:list {"textColor":"vivid-cyan-blue","style":{"elements":{"link":{"color":{"text":"var:preset|color|vivid-cyan-blue"}}},"typography":{"textDecoration":"underline"}}} -->
        <ul
          style="text-decoration: underline"
          class="has-vivid-cyan-blue-color has-text-color has-link-color"
        >
          <!-- wp:list-item -->
          <li>Item A</li>
          <!-- /wp:list-item -->

          <!-- wp:list-item -->
          <li>Item B</li>
          <!-- /wp:list-item -->
        </ul>
        <!-- /wp:list -->
      </li>
      <!-- /wp:list-item -->
    </ul>
    <!-- /wp:list -->
  </div>
  <!-- /wp:column -->

  <!-- wp:column -->
  <div class="wp-block-column">
    <!-- wp:heading {"textAlign":"center","level":4} -->
    <h4 class="wp-block-heading has-text-align-center">Product 3</h4>
    <!-- /wp:heading -->

    <!-- wp:image {"width":"150px","sizeSlug":"large","align":"center"} -->
    <figure class="wp-block-image aligncenter size-large is-resized">
      <img
        src="https://picsum.photos/id/36/180/200"
        alt=""
        style="width: 150px"
      />
    </figure>
    <!-- /wp:image -->

    <!-- wp:list {"ordered":true} -->
    <ol>
      <!-- wp:list-item -->
      <li>Item 1</li>
      <!-- /wp:list-item -->

      <!-- wp:list-item -->
      <li>
        Item 2
        <!-- wp:list {"textColor":"vivid-green-cyan","style":{"elements":{"link":{"color":{"text":"var:preset|color|vivid-green-cyan"}}},"typography":{"fontStyle":"normal","fontWeight":"700"}}} -->
        <ul
          style="font-style: normal; font-weight: 700"
          class="has-vivid-green-cyan-color has-text-color has-link-color"
        >
          <!-- wp:list-item -->
          <li>Item A</li>
          <!-- /wp:list-item -->

          <!-- wp:list-item -->
          <li>Item B</li>
          <!-- /wp:list-item -->
        </ul>
        <!-- /wp:list -->
      </li>
      <!-- /wp:list-item -->
    </ol>
    <!-- /wp:list -->
  </div>
  <!-- /wp:column -->
</div>
<!-- /wp:columns -->

<!-- wp:buttons {"align":"full","style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"justifyContent":"center"}} -->
<div class="wp-block-buttons alignfull">
  <!-- wp:button {"width":25} -->
  <div class="wp-block-button has-custom-width wp-block-button__width-25">
    <a class="wp-block-button__link wp-element-button">Button 1</a>
  </div>
  <!-- /wp:button -->

  <!-- wp:button {"width":25} -->
  <div class="wp-block-button has-custom-width wp-block-button__width-25">
    <a class="wp-block-button__link wp-element-button">Button 2</a>
  </div>
  <!-- /wp:button -->

  <!-- wp:button {"width":25} -->
  <div class="wp-block-button has-custom-width wp-block-button__width-25">
    <a class="wp-block-button__link wp-element-button">Button 3</a>
  </div>
  <!-- /wp:button -->
</div>
<!-- /wp:buttons -->

<!-- wp:paragraph {"align":"center","fontSize":"small"} -->
<p class="has-text-align-center has-small-font-size">
  You received this email because you are subscribed to the [site:title]
</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","fontSize":"small"} -->
<p class="has-text-align-center has-small-font-size">
  <a href="[link:subscription_unsubscribe_url]">Unsubscribe</a> |
  <a href="[link:subscription_manage_url]">Manage subscription</a>
</p>
<!-- /wp:paragraph -->
