Ready Made Groupings

Heading with an image, text and button

Code for heading with an image, text and button:

{ group: {
    elements: [
      { title: { text: "Heading" } },
      { image: { src: "https://images.unsplash.com/photo-1533435384065-01b6e7455972?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b7d3efe9f0293c406367d5526b0e5d4b&auto=format&fit=crop&w=2689&q=80"} },
      { p: { text: "Here is some supporting text" } },
      { button: { text: "Button", href: "https://example.com" } },
    ],
  }
},

Side by side image and text

Code for side by side image and text:

{ group: {
    style: 'width: 49%; display: inline-block; vertical-align:middle;',
    elements: [
      { image: { src: "https://images.unsplash.com/photo-1533435384065-01b6e7455972?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b7d3efe9f0293c406367d5526b0e5d4b&auto=format&fit=crop&w=2689&q=80"} },
    ],
  }
},
{ group: {
    style: 'width: 49%; display: inline-block; vertical-align:middle;',
    elements: [
      { p: { text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam", style: "text-align: left;" } },
    ],
  }
},

Multi-row side by side image and text with heading

Code for multi-row side by side image and text with heading:

{ group: {
      elements: [
          { title: { text: "Heading", style: "text-align: left;" } },
      ],
    }
},
{ group: {
    style: "margin-bottom: 20px;",
    elements: [
      { group: {
          style: 'width: 49%; display: inline-block; vertical-align:middle;',
        elements: [
              { image: { src: "https://images.unsplash.com/photo-1533435384065-01b6e7455972?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b7d3efe9f0293c406367d5526b0e5d4b&auto=format&fit=crop&w=2689&q=80"} },
        ],
          }
      },
      { group: {
          style: 'width: 49%; display: inline-block; vertical-align:middle;',
            elements: [
              { p: { text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam", style: "text-align: left;" } },
            ],
          }
      },
    ],
  }
},
{ group: {
    style: "margin-bottom: 20px;",
    elements: [
      { group: {
          style: 'width: 49%; display: inline-block; vertical-align:middle;',
            elements: [
            { image: { src: "https://images.unsplash.com/photo-1533435384065-01b6e7455972?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b7d3efe9f0293c406367d5526b0e5d4b&auto=format&fit=crop&w=2689&q=80"} },
            ],
          }
      },
      { group: {
          style: 'width: 49%; display: inline-block; vertical-align:middle;',
            elements: [
            { p: { text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam", style: "text-align: left;" } },
            ],
          }
      },
    ],
  }
},
{ group: {
    style: "margin-bottom: 20px;",
    elements: [
      { group: {
          style: 'width: 49%; display: inline-block; vertical-align:middle;',
            elements: [
            { image: { src: "https://images.unsplash.com/photo-1533435384065-01b6e7455972?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b7d3efe9f0293c406367d5526b0e5d4b&auto=format&fit=crop&w=2689&q=80"} },
            ],
          }
      },
      { group: {
          style: 'width: 49%; display: inline-block; vertical-align:middle;',
      elements: [
            { p: { text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam", style: "text-align: left;" } },
            ],
          }
      },
    ],
  }
},

Multi-row side by side alternating image and text

Code for multi-row side by side alternating image and text:

{ group: {
    style: "margin-bottom: 30px;",
    elements: [
      { group: {
          style: 'width: 49%; display: inline-block; vertical-align:middle;',
        elements: [
              { image: { src: "https://images.unsplash.com/photo-1533435384065-01b6e7455972?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b7d3efe9f0293c406367d5526b0e5d4b&auto=format&fit=crop&w=2689&q=80"} },
        ],
          }
      },
      { group: {
          style: 'width: 49%; display: inline-block; vertical-align:middle;',
            elements: [
              { p: { text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam", style: "text-align: left;" } },
            ],
          }
      },
    ],
  }
},
{ group: {
    style: "margin-bottom: 30px;",
    elements: [
      { group: {
          style: 'width: 49%; display: inline-block; vertical-align:middle;',
            elements: [
              { p: { text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam", style: "text-align: left;" } },
            ],
          }
      },
      { group: {
          style: 'width: 49%; display: inline-block; vertical-align:middle;',
            elements: [
              { image: { src: "https://images.unsplash.com/photo-1533435384065-01b6e7455972?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b7d3efe9f0293c406367d5526b0e5d4b&auto=format&fit=crop&w=2689&q=80"} },
            ],
          }
      },
    ],
  }
},
{ group: {
    style: "margin-bottom: 30px;",
    elements: [
      { group: {
          style: 'width: 49%; display: inline-block; vertical-align:middle;',
            elements: [
            { image: { src: "https://images.unsplash.com/photo-1533435384065-01b6e7455972?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b7d3efe9f0293c406367d5526b0e5d4b&auto=format&fit=crop&w=2689&q=80"} },
            ],
          }
      },
      { group: {
          style: 'width: 49%; display: inline-block; vertical-align:middle;',
      elements: [
            { p: { text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam", style: "text-align: left;" } },
            ],
          }
      },
    ],
  }
},

Three column image and text

Code for three column image and text:

{ group: {
    elements: [
      { group: {
          style: "display: inline-block; width: 32%; vertical-align: middle;",
            elements: [
            { image: { src: "https://images.unsplash.com/photo-1533435384065-01b6e7455972?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b7d3efe9f0293c406367d5526b0e5d4b&auto=format&fit=crop&w=2689&q=80"} },
            { p: { text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"} },
          ],
          }
      },
      { group: {
          style: "display: inline-block; width: 32%; vertical-align: middle;",
        elements: [
            { image: { src: "https://images.unsplash.com/photo-1533435384065-01b6e7455972?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b7d3efe9f0293c406367d5526b0e5d4b&auto=format&fit=crop&w=2689&q=80"} },
            { p: { text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"} },
        ],
          }
      },
      { group: {
          style: "display: inline-block; width: 32%; vertical-align: middle;",
            elements: [
            { image: { src: "https://images.unsplash.com/photo-1533435384065-01b6e7455972?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b7d3efe9f0293c406367d5526b0e5d4b&auto=format&fit=crop&w=2689&q=80"} },
            { p: { text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"} },
            ],
          }
      },
    ],
  }
},