import placeholderImage from "raw-loader!../../../icons/our-neighborhood.svg";

export const sectionBlockCodes = [
  {
    name: "section11Empty",
    type: "code",
    content: `<div class='container'>
    <div class='row'>
      <div class='col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12'></div>
    </div>
    </div>`,
  },
  {
    name: "section22Empty",
    type: "code",
    content: `<div class='container'>
    <div class='row'>
      <div class='col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6'></div>
      <div class='col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6'></div>
    </div>
    </div>`,
  },
  {
    name: "section33Empty",
    type: "code",
    content: `<div class='container'>
    <div class='row'>
      <div class='col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4'></div>
      <div class='col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4'></div>
      <div class='col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4'></div>
    </div>
    </div>`,
  },
  {
    name: "section44Empty",
    type: "code",
    content: `<div class='container'>
    <div class='row'>
      <div class='col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3'></div>
      <div class='col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3'></div>
      <div class='col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3'></div>
      <div class='col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3'></div>
    </div>
    </div>`,
  },
  {
    name: "section11",
    type: "code",
    content: `<div class='container'>
    <div class='row'>
      <div class='col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12'>
        <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
          <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
            <h3 data-gjs-type="header" draggable="true" data-highlightable="1" class="">My Sample Heading</h3>
          </div>
          <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
            <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
          </div>
        </div>
      </div>
    </div>
    </div>`,
  },
  {
    name: "section22",
    type: "code",
    content: `<div class='container'>
    <div class='row'>
      <div class='col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6'>
        <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
          <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
            <h3 data-gjs-type="header" draggable="true" data-highlightable="1" class="">My Sample Heading</h3>
          </div>
          <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
            <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
          </div>
        </div>
      </div>
      <div class='col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6'>
        <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
          <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
            <h3 data-gjs-type="header" draggable="true" data-highlightable="1" class="">My Sample Heading</h3>
          </div>
          <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
            <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
          </div>
        </div>
      </div>
    </div>
    </div>`,
  },
  {
    name: "section33",
    type: "code",
    content: `
    <div class='container'>
  <div class='row'>
    <div class='col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4'>
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h3 data-gjs-type="header" draggable="true" data-highlightable="1" class="">My Sample Heading</h3>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
    </div>
    <div class='col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4'>
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h3 data-gjs-type="header" draggable="true" data-highlightable="1" class="">My Sample Heading</h3>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
    </div>
    <div class='col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4'>
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h3 data-gjs-type="header" draggable="true" data-highlightable="1" class="">My Sample Heading</h3>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
    </div>
  </div>
</div>
    `,
  },
  {
    name: "section44",
    type: "code",
    content: `<div class='container'>
    <div class='row'>
      <div class='col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3'>
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
      <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
        <h3 data-gjs-type="header" draggable="true" data-highlightable="1" class="">My Sample Heading</h3>
      </div>
      <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
        <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
      </div>
    </div>
      </div>
      <div class='col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3'>
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
      <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
        <h3 data-gjs-type="header" draggable="true" data-highlightable="1" class="">My Sample Heading</h3>
      </div>
      <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
        <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
      </div>
    </div>
      </div>
      <div class='col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3'>
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
      <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
        <h3 data-gjs-type="header" draggable="true" data-highlightable="1" class="">My Sample Heading</h3>
      </div>
      <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
        <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
      </div>
    </div>
      </div>
      <div class='col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3'>
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
      <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
        <h3 data-gjs-type="header" draggable="true" data-highlightable="1" class="">My Sample Heading</h3>
      </div>
      <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
        <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
      </div>
    </div>
      </div>
    </div>
    </div>`,
  },
  {
    name: "section4060",
    type: "code",
    content: `<div class='container'>
    <div class='row'>
        <div class='col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
        <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h3 data-gjs-type="header" draggable="true" data-highlightable="1" class="">My Sample Heading</h3>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
        </div>
        <div class='col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8'>
        <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h3 data-gjs-type="header" draggable="true" data-highlightable="1" class="">My Sample Heading</h3>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
        </div>
    </div>
    </div>`,
  },
  {
    name: "section6040",
    type: "code",
    content: `<div class='container'>
    <div class='row'>
        <div class='col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8'>
        <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h3 data-gjs-type="header" draggable="true" data-highlightable="1" class="">My Sample Heading</h3>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
        </div>
        <div class='col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
        <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h3 data-gjs-type="header" draggable="true" data-highlightable="1" class="">My Sample Heading</h3>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
        </div>
    </div>
    </div>`,
  },
  {
    name: "section633",
    type: "code",
    content: `<div class='container'>
    <div class='row'>
        <div class='col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6'>
        <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h3 data-gjs-type="header" draggable="true" data-highlightable="1" class="">My Sample Heading</h3>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
        </div>
        <div class='col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3'>
        <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h3 data-gjs-type="header" draggable="true" data-highlightable="1" class="">My Sample Heading</h3>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
        </div>
        <div class='col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3'>
        <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h3 data-gjs-type="header" draggable="true" data-highlightable="1" class="">My Sample Heading</h3>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
        </div>
    </div>
    </div>`,
  },
  {
    name: "section363",
    type: "code",
    content: `<div class='container'>
    <div class='row'>
        <div class='col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3'>
        <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h3 data-gjs-type="header" draggable="true" data-highlightable="1" class="">My Sample Heading</h3>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
        </div>
        <div class='col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6'>
        <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h3 data-gjs-type="header" draggable="true" data-highlightable="1" class="">My Sample Heading</h3>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
        </div>
        <div class='col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3'>
        <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h3 data-gjs-type="header" draggable="true" data-highlightable="1" class="">My Sample Heading</h3>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
        </div>
    </div>
    </div>`,
  },
  {
    name: "section2columns",
    type: "code",
    content: `
    <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container">
  <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row"><img data-gjs-type="bs-image" draggable="true" src=${placeholderImage} class="img-fluid"></div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h1 data-gjs-type="header" draggable="true" data-highlightable="1" class="" contenteditable="false">Heading</h1>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
    </div>
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row"><img data-gjs-type="bs-image" draggable="true" src=${placeholderImage} class="img-fluid"></div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h1 data-gjs-type="header" draggable="true" data-highlightable="1" class="" contenteditable="false">Heading</h1>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
    </div>
  </div>
</div>
    `,
  },
  {
    name: "section3columns",
    type: "code",
    content: `
    <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container">
  <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row"><img data-gjs-type="bs-image" draggable="true" src=${placeholderImage} class="img-fluid"></div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h1 data-gjs-type="header" draggable="true" data-highlightable="1" class="" contenteditable="false">Heading</h1>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
    </div>
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row"><img data-gjs-type="bs-image" draggable="true" src=${placeholderImage} class="img-fluid"></div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h1 data-gjs-type="header" draggable="true" data-highlightable="1" class="" contenteditable="false">Heading</h1>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
    </div>
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row"><img data-gjs-type="bs-image" draggable="true" src=${placeholderImage} class="img-fluid"></div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h1 data-gjs-type="header" draggable="true" data-highlightable="1" class="" contenteditable="false">Heading</h1>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
    </div>
  </div>
</div>
    `,
  },
  {
    name: "section4columns",
    type: "code",
    content: `
    <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container ">
  <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-lg-3 col-xl-3 col-md-3">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row"><img data-gjs-type="bs-image" draggable="true" src=${placeholderImage} class="img-fluid"></div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h1 data-gjs-type="header" draggable="true" data-highlightable="1">Heading
          </h1>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
          </p>
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
          </p>
        </div>
      </div>
    </div>
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row"><img data-gjs-type="bs-image" draggable="true" src=${placeholderImage} class="img-fluid"></div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h1 data-gjs-type="header" draggable="true" data-highlightable="1">Heading
          </h1>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
          </p>
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
          </p>
        </div>
      </div>
    </div>
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row"><img data-gjs-type="bs-image" draggable="true" src=${placeholderImage} class="img-fluid"></div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h1 data-gjs-type="header" draggable="true" data-highlightable="1" class="">Heading
          </h1>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
          </p>
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
          </p>
        </div>
      </div>
    </div>
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row"><img data-gjs-type="bs-image" draggable="true" src=${placeholderImage} class="img-fluid"></div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h1 data-gjs-type="header" draggable="true" data-highlightable="1">Heading
          </h1>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
          </p>
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
    `,
  },
  {
    name: "section3columnsHB",
    type: "code",
    content: `
    <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container">
  <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 "><img data-gjs-type="bs-image" draggable="true" src=${placeholderImage} class="img-fluid" style="width: 100%; height: 300px;">
      <div data-gjs-type="column_break" draggable="true" data-highlightable="1" class="w-100" style="height: 32px;"></div>
    </div>
  </div>
  <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-xl-4 col-lg-4 col-md-4">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h1 data-gjs-type="header" draggable="true" data-highlightable="1" class="" contenteditable="false">Heading</h1>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
    </div>
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-xl-4 col-lg-4 col-md-4">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h1 data-gjs-type="header" draggable="true" data-highlightable="1" class="">Heading</h1>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
    </div>
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-xl-4 col-lg-4 col-md-4">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h1 data-gjs-type="header" draggable="true" data-highlightable="1" class="">Heading</h1>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
    </div>
  </div>
</div>
    `,
  },
  {
    name: "section4columnsHB",
    type: "code",
    content: `
    <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container">
  <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 "><img data-gjs-type="bs-image" draggable="true" src=${placeholderImage} class="img-fluid" style="width: 100%; height: 300px;">
      <div data-gjs-type="column_break" draggable="true" data-highlightable="1" class="w-100" style="height: 32px;"></div>
    </div>
  </div>
  <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-xl-3 col-lg-3 col-md-3">
        <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
            <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
            <h1 data-gjs-type="header" draggable="true" data-highlightable="1" class="" contenteditable="false">Heading</h1>
            </div>
            <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
            <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
            <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
            </div>
        </div>
    </div>
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-xl-3 col-lg-3 col-md-3">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h1 data-gjs-type="header" draggable="true" data-highlightable="1" class="" contenteditable="false">Heading</h1>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
    </div>
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-xl-3 col-lg-3 col-md-3">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h1 data-gjs-type="header" draggable="true" data-highlightable="1" class="">Heading</h1>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
    </div>
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-xl-3 col-lg-3 col-md-3">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h1 data-gjs-type="header" draggable="true" data-highlightable="1" class="">Heading</h1>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
    </div>
  </div>
</div>
    `,
  },
  {
    name: "section2columnsHB",
    type: "code",
    content: `
    <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container">
  <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 "><img data-gjs-type="bs-image" draggable="true" src=${placeholderImage} class="img-fluid" style="width: 100%; height: 300px;">
      <div data-gjs-type="column_break" draggable="true" data-highlightable="1" class="w-100" style="height: 32px;"></div>
    </div>
  </div>
  <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-xl-6 col-lg-6 col-md-6">
        <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
            <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
            <h1 data-gjs-type="header" draggable="true" data-highlightable="1" class="" contenteditable="false">Heading</h1>
            </div>
            <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
            <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
            <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
            </div>
        </div>
    </div>
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-xl-6 col-lg-6 col-md-6">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h1 data-gjs-type="header" draggable="true" data-highlightable="1" class="" contenteditable="false">Heading</h1>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
    </div>
  </div>
</div>
    `,
  },
  {
    name: "section2columns3RowsList",
    type: "code",
    content: `
    <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container">
  <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-xl-6 col-lg-6 col-md-6">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"><img data-gjs-type="bs-image" draggable="true" src=${placeholderImage} class="img-fluid"></div>
          <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
            <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
              <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
                <h3 data-gjs-type="header" draggable="true" data-highlightable="1" class="">Heading</h3>
              </div>
              <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
                <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-xl-6 col-lg-6 col-md-6">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"><img data-gjs-type="bs-image" draggable="true" src=${placeholderImage} class="img-fluid"></div>
          <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
            <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
              <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
                <h3 data-gjs-type="header" draggable="true" data-highlightable="1">Heading</h3>
              </div>
              <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
                <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-xl-6 col-lg-6 col-md-6">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"><img data-gjs-type="bs-image" draggable="true" src=${placeholderImage} class="img-fluid"></div>
          <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
            <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
              <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
                <h3 data-gjs-type="header" draggable="true" data-highlightable="1">Heading</h3>
              </div>
              <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
                <p data-gjs-type="paragraph" draggable="true" data-highlightable="1">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-xl-6 col-lg-6 col-md-6">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"><img data-gjs-type="bs-image" draggable="true" src=${placeholderImage} class="img-fluid"></div>
          <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
            <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
              <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
                <h3 data-gjs-type="header" draggable="true" data-highlightable="1">Heading</h3>
              </div>
              <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
                <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-xl-6 col-lg-6 col-md-6">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"><img data-gjs-type="bs-image" draggable="true" src=${placeholderImage} class="img-fluid"></div>
          <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
            <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
              <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
                <h3 data-gjs-type="header" draggable="true" data-highlightable="1">Heading</h3>
              </div>
              <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
                <p data-gjs-type="paragraph" draggable="true" data-highlightable="1">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-xl-6 col-lg-6 col-md-6">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"><img data-gjs-type="bs-image" draggable="true" src=${placeholderImage} class="img-fluid"></div>
          <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
            <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
              <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
                <h3 data-gjs-type="header" draggable="true" data-highlightable="1">Heading</h3>
              </div>
              <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
                <p data-gjs-type="paragraph" draggable="true" data-highlightable="1">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
    `,
  },
  {
    name: "section2columns3RowsListWithHeader",
    type: "code",
    content: `
    <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container">
  <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 "><img data-gjs-type="bs-image" draggable="true" src=${placeholderImage} class="img-fluid"
        style="width: 100%; height: 300px;"></div>
    <div data-gjs-type="column_break" draggable="true" data-highlightable="1" class="w-100" style="height: 32px;"></div>
  </div>
  <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-xl-6 col-lg-6 col-md-6">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"><img data-gjs-type="bs-image" draggable="true" src=${placeholderImage} class="img-fluid"></div>
          <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
            <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
              <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
                <h3 data-gjs-type="header" draggable="true" data-highlightable="1" class="">Heading
                </h3>
              </div>
              <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
                <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-xl-6 col-lg-6 col-md-6">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"><img data-gjs-type="bs-image" draggable="true" src=${placeholderImage} class="img-fluid"></div>
          <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
            <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
              <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
                <h3 data-gjs-type="header" draggable="true" data-highlightable="1" class="">Heading
                </h3>
              </div>
              <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
                <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-xl-6 col-lg-6 col-md-6">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"><img data-gjs-type="bs-image" draggable="true" src=${placeholderImage} class="img-fluid"></div>
          <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
            <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
              <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
                <h3 data-gjs-type="header" draggable="true" data-highlightable="1">Heading
                </h3>
              </div>
              <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
                <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-xl-6 col-lg-6 col-md-6">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"><img data-gjs-type="bs-image" draggable="true" src=${placeholderImage} class="img-fluid"></div>
          <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
            <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
              <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
                <h3 data-gjs-type="header" draggable="true" data-highlightable="1">Heading
                </h3>
              </div>
              <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
                <p data-gjs-type="paragraph" draggable="true" data-highlightable="1">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
    `,
  },
  {
    name: "section1rowForm",
    type: "code",
    content: `
    <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container">
  <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
      <form data-gjs-type="form" draggable="true" data-highlightable="1" id="dc-form-9YWv1ecj" class="dc-form-default dc-form-bordered">
        <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-md-12">
          <h4 data-gjs-type="header" draggable="true" data-highlightable="1" class="title">Form Details</h4>
        </div>
        <div data-gjs-type="default" draggable="false" data-highlightable="1" class="form-container">
          <div data-gjs-type="default" draggable="true" data-highlightable="1" class="alert alert-danger alert-message" style="display: none;"></div>
          <div data-gjs-type="default" draggable="true" data-highlightable="1" class="alert alert-success success-message" style="display: none;"></div>
          <div data-gjs-type="column" draggable="true" data-highlightable="1" class="form-group col-12 col-md-12"><label data-gjs-type="label" draggable="true" data-highlightable="1" class="label">Name</label><input data-gjs-type="input"
              draggable="true" data-highlightable="1" name="name" type="text" placeholder="Type here your name" class="form-control input--style"></div>
          <div data-gjs-type="column" draggable="true" data-highlightable="1" class="form-group col-12 col-md-12"><label data-gjs-type="label" draggable="true" data-highlightable="1" class="label">Email</label><input data-gjs-type="input"
              draggable="true" data-highlightable="1" name="email" type="email" placeholder="Type here your email" class="form-control input--style"></div>
          <div data-gjs-type="column" draggable="true" data-highlightable="1" class="form-group col-12 col-md-12"><input data-gjs-type="checkbox" draggable="true" data-highlightable="1" name="sex" type="checkbox" id="dc-form-cb-m-5c7fWr21" value="M"
              class="form-check-input dc-checkbox"><label data-gjs-type="label" draggable="true" data-highlightable="1" for="dc-form-cb-m-5c7fWr21" class="form-check-label">M</label></div>
          <div data-gjs-type="column" draggable="true" data-highlightable="1" class="form-group col-12 col-md-12"><input data-gjs-type="checkbox" draggable="true" data-highlightable="1" name="sex" type="checkbox" id="dc-form-cb-f-xeFCs0lx" value="F"
              class="form-check-input dc-checkbox"><label data-gjs-type="label" draggable="true" data-highlightable="1" for="dc-form-cb-f-xeFCs0lx" class="form-check-label">F</label></div>
          <div data-gjs-type="column" draggable="true" data-highlightable="1" class="form-group col-12 col-md-12"><label data-gjs-type="label" draggable="true" data-highlightable="1" class="label">Message</label><textarea data-gjs-type="textarea"
              draggable="true" data-highlightable="1" name="message" placeholder="Type here your message" class="form-control input--style"></textarea></div>
          <div data-gjs-type="column" draggable="true" data-highlightable="1" class="form-group col-12 col-md-12 p-t-10 no-border-bottom"><button data-gjs-type="bootstrap_button" draggable="true" data-highlightable="1" role="button" type="submit"
              class="dc-button dc-btn--blue">Send</button></div>
        </div>
      </form>
    </div>
  </div>
</div>
    `,
  },
  {
    name: "section3rows",
    type: "code",
    content: `
    <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container">
  <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4"><img data-gjs-type="bs-image" draggable="true" src=${placeholderImage} class="img-fluid">
    </div>
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h1 data-gjs-type="header" draggable="true" data-highlightable="1" class="">My Sample Heading</h1>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
    </div>
    <div data-gjs-type="column_break" draggable="true" data-highlightable="1" class="w-100" style="height: 32px;"></div>
  </div>
  <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h1 data-gjs-type="header" draggable="true" data-highlightable="1" class="">My Sample Heading</h1>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
    </div>
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4"><img data-gjs-type="bs-image" draggable="true" src=${placeholderImage} class="img-fluid">
    </div>
    <div data-gjs-type="column_break" draggable="true" data-highlightable="1" class="w-100" style="height: 32px;"></div>
  </div>
  <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4"><img data-gjs-type="bs-image" draggable="true" src=${placeholderImage} class="img-fluid">
    </div>
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h1 data-gjs-type="header" draggable="true" data-highlightable="1" class="">My Sample Heading</h1>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
    </div>
  </div>
</div>
    `,
  },
  {
    name: "section3rowsLeftAlign",
    type: "code",
    content: `
    <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container">
  <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4"><img data-gjs-type="bs-image" draggable="true" src=${placeholderImage} class="img-fluid">
    </div>
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h1 data-gjs-type="header" draggable="true" data-highlightable="1" class="">My Sample Heading</h1>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
    </div>
    <div data-gjs-type="column_break" draggable="true" data-highlightable="1" class="w-100" style="height: 32px;"></div>
  </div>
  <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4"><img data-gjs-type="bs-image" draggable="true" src=${placeholderImage} class="img-fluid">
    </div>
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h1 data-gjs-type="header" draggable="true" data-highlightable="1" class="">My Sample Heading</h1>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
    </div>
  </div>
  <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4"><img data-gjs-type="bs-image" draggable="true" src=${placeholderImage} class="img-fluid">
    </div>
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h1 data-gjs-type="header" draggable="true" data-highlightable="1" class="">My Sample Heading</h1>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        </div>
      </div>
    </div>
  </div>
</div>
    `,
  },
  {
    name: "section3rowsSimple",
    type: "code",
    content: `
    <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container">
  <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h2 data-gjs-type="header" draggable="true" data-highlightable="1" class="">My Sample Heading
          </h2>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
          </p>
        </div>
      </div>
    </div>
    <div data-gjs-type="column_break" draggable="true" data-highlightable="1" class="w-100" style="height: 32px;">
    </div>
  </div>
  <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h2 data-gjs-type="header" draggable="true" data-highlightable="1" class="">My Sample Heading
          </h2>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
          </p>
        </div>
      </div>
    </div>
    <div data-gjs-type="column_break" draggable="true" data-highlightable="1" class="w-100" style="height: 32px;">
    </div>
  </div>
  <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
    <div data-gjs-type="column" draggable="true" data-highlightable="1" class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
      <div data-gjs-type="container" draggable="true" data-highlightable="1" class="container-fluid">
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <h2 data-gjs-type="header" draggable="true" data-highlightable="1" class="">My Sample Heading
          </h2>
        </div>
        <div data-gjs-type="row" draggable="true" data-highlightable="1" class="row">
          <p data-gjs-type="paragraph" draggable="true" data-highlightable="1" class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
    `,
  },
];
