Templates

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate accusamus optio ab nihil qui, dicta consequuntur illum praesentium laborum assumenda sed inventore soluta eum et repellat vero sunt facere eligendi?

Example #1

<div style="display: flex; flex-direction: column; border: 1px solid #e5e7eb;">
  <div style="height: 80px; border: 1px solid #e5e7eb;"></div>
  <div style="height: 160px; border: 1px solid #e5e7eb;"></div>
  <div style="height: 80px; border: 1px solid #e5e7eb;"></div>
</div>

Example #2

<div style="display: flex; border: 1px solid #e5e7eb;">
  <div style="width: 160px; border: 1px solid #e5e7eb;"></div>
  <div style="flex: 1; flex-direction: column;">
    <div style="height: 80px; border: 1px solid #e5e7eb;"></div>
    <div style="height: 160px; border: 1px solid #e5e7eb;"></div>
    <div style="height: 80px; border: 1px solid #e5e7eb;"></div>
  </div>
</div>

Example #3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Error corporis eos temporibus saepe, perspiciatis minima tempore sapiente commodi adipisci ipsam assumenda, quis natus laboriosam dignissimos repellat maxime dolor quasi ducimus!

<div style="display: flex; flex-direction: column; border: 1px solid #e5e7eb;">
  <div style="height: 80px; border: 1px solid #e5e7eb;"></div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 40px; border: 1px solid #e5e7eb; padding-left: 40px; padding-right: 40px; padding-top: 80px; padding-bottom: 80px;">
    <div style="display: flex; align-items: center; gap: 40px;">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error corporis eos temporibus saepe, perspiciatis minima tempore sapiente commodi adipisci ipsam assumenda, quis natus laboriosam dignissimos repellat maxime dolor quasi ducimus!
      </p>
      <img style="margin-bottom: 16px;" />
    </div>

    <div style="display: flex; align-items: center; gap: 40px;">
      <img style="margin-bottom: 16px;" />
      <p style="margin: 0px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error corporis eos temporibus saepe, perspiciatis minima tempore sapiente commodi adipisci ipsam assumenda, quis natus laboriosam dignissimos repellat maxime dolor quasi ducimus!
      </p>
    </div>
  </div>
</div>

Example #4

Post Title #1

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, consectetur nam. Maiores autem deleniti ipsa odio saepe accusamus ratione veritatis quisquam quam, harum nemo illum officiis ex quidem nulla beatae!

Post Title #2

Post Title #3

<div style="display: flex; flex-direction: column; border: 1px solid #e5e7eb;">
  <div style="height: 80px; border: 1px solid #e5e7eb;"></div>
  <div style="display: flex; flex-direction: column; gap: 32px; border: 1px solid #e5e7eb; padding: 32px;">
    <div style="display: flex; gap: 16px;">
      <img />
      <div>
        <h2 style="margin-bottom: 8px; font-weight: bold;">Post Title #1</h2>
        <span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, consectetur nam. Maiores autem deleniti ipsa odio saepe accusamus ratione veritatis quisquam quam, harum nemo illum officiis ex quidem nulla beatae!
        </span>
      </div>
    </div>

    <div style="display: flex; gap: 16px;">
      <img />
      <div>
        <h2 style="margin-bottom: 8px; font-weight: bold;">Post Title #2</h2>
        <span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, consectetur nam. Maiores autem deleniti ipsa odio saepe accusamus ratione veritatis quisquam quam, harum nemo illum officiis ex quidem nulla beatae!
        </span>
      </div>
    </div>

    <div style="display: flex; gap: 16px;">
      <img />
      <div>
        <h2 style="margin-bottom: 8px; font-weight: bold;">Post Title #3</h2>
        <span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, consectetur nam. Maiores autem deleniti ipsa odio saepe accusamus ratione veritatis quisquam quam, harum nemo illum officiis ex quidem nulla beatae!
        </span>
      </div>
    </div>
  </div>
</div>

Example #5

Post Title #1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo libero eaque tempore itaque ut? Voluptas iure minima excepturi corrupti praesentium vel suscipit facere iste, in, veniam, vitae quis repellat tenetur.

<div style="display: flex; flex-direction: column; border: 1px solid #e5e7eb;">
  <div style="height: 80px; border: 1px solid #e5e7eb;"></div>
  <div style="display: flex; flex-direction: column; border: 1px solid #e5e7eb; padding: 32px;">
    <div style="margin-left: auto; margin-right: auto; margin-bottom: 32px;">
      <img />
    </div>
    <h2 style="margin-bottom: 16px; font-weight: bold;">Post Title #1</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo libero eaque tempore itaque ut? Voluptas iure minima excepturi corrupti praesentium vel suscipit facere iste, in, veniam, vitae quis repellat tenetur.
    </p>
    <br></br>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo libero eaque tempore itaque ut? Voluptas iure minima excepturi corrupti praesentium vel suscipit facere iste, in, veniam, vitae quis repellat tenetur.
    </p>
    <div style="margin-top: 24px; display: flex; justify-content: space-between; border-top: 1px solid #e5e7eb; padding-top: 24px;">
      <button style="border-radius: 4px; border: 1px solid #e5e7eb; padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px;">Previous post</button>
      <button style="border-radius: 4px; border: 1px solid #e5e7eb; padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px;">Next post</button>
    </div>
  </div>
</div>

Example #6

<div style="display: flex; border: 1px solid #e5e7eb;">
  <div style="width: 160px; border: 1px solid #e5e7eb;"></div>
  <div style="flex: 1; flex-direction: column;">
    <div style="height: 80px; border: 1px solid #e5e7eb;"></div>
    <div style="border: 1px solid #e5e7eb;">
      <div style="display: flex; border: 1px solid #e5e7eb; padding: 40px;">
        <div style="height: 160px; padding: 4px;">
          <div style="height: 100%; border-radius: 4px; border: 1px solid #e5e7eb;"></div>
        </div>

        <div style="height: 160px; padding: 4px;">
          <div style="height: 100%; border-radius: 4px; border: 1px solid #e5e7eb;"></div>
        </div>

        <div style="height: 160px; padding: 4px;">
          <div style="height: 100%; border-radius: 4px; border: 1px solid #e5e7eb;"></div>
        </div>

        <div style="height: 160px; padding: 4px;">
          <div style="height: 100%; border-radius: 4px; border: 1px solid #e5e7eb;"></div>
        </div>

        <div style="height: 160px; padding: 4px;">
          <div style="height: 100%; border-radius: 4px; border: 1px solid #e5e7eb;"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Example #7

Title #1

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Title #1

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Title #1

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Title #1

Lorem ipsum dolor sit amet consectetur adipisicing elit.

<div style="display: flex; border: 1px solid #e5e7eb;">
  <div style="width: 160px; border: 1px solid #e5e7eb;"></div>
  <div style="flex: 1; flex-direction: column;">
    <div style="height: 80px; border: 1px solid #e5e7eb;"></div>
    <div style="border: 1px solid #e5e7eb;">
      <div style="display: flex; border: 1px solid #e5e7eb; padding: 40px;">
        <div style="padding: 4px;">
          <div style="display: flex; flex-direction: column; gap: 8px; border-radius: 4px; border: 1px solid #e5e7eb;">
            <img />
            <div style="padding: 8px;">
              <h3 style="margin-bottom: 8px; font-weight: bold;">Title #1
              </h3>
              <span style="margin-bottom: 16px; display: block;">Lorem ipsum dolor sit amet consectetur adipisicing elit.
              </span>
              <button style="margin-left: auto; display: block; border-radius: 4px; border: 1px solid #e5e7eb; padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px;">Add to cart</button>
            </div>
          </div>
        </div>

        <div style="padding: 4px;">
          <div style="display: flex; flex-direction: column; gap: 8px; border-radius: 4px; border: 1px solid #e5e7eb;">
            <img />
            <div style="padding: 8px;">
              <h3 style="margin-bottom: 8px; font-weight: bold;">Title #1
              </h3>
              <span style="margin-bottom: 16px; display: block;">Lorem ipsum dolor sit amet consectetur adipisicing elit.
              </span>
              <button style="margin-left: auto; display: block; border-radius: 4px; border: 1px solid #e5e7eb; padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px;">Add to cart</button>
            </div>
          </div>
        </div>

        <div style="padding: 4px;">
          <div style="display: flex; flex-direction: column; gap: 8px; border-radius: 4px; border: 1px solid #e5e7eb;">
            <img />
            <div style="padding: 8px;">
              <h3 style="margin-bottom: 8px; font-weight: bold;">Title #1
              </h3>
              <span style="margin-bottom: 16px; display: block;">Lorem ipsum dolor sit amet consectetur adipisicing elit.
              </span>
              <button style="margin-left: auto; display: block; border-radius: 4px; border: 1px solid #e5e7eb; padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px;">Add to cart</button>
            </div>
          </div>
        </div>

        <div style="padding: 4px;">
          <div style="display: flex; flex-direction: column; gap: 8px; border-radius: 4px; border: 1px solid #e5e7eb;">
            <img />
            <div style="padding: 8px;">
              <h3 style="margin-bottom: 8px; font-weight: bold;">Title #1
              </h3>
              <span style="margin-bottom: 16px; display: block;">Lorem ipsum dolor sit amet consectetur adipisicing elit.
              </span>
              <button style="margin-left: auto; display: block; border-radius: 4px; border: 1px solid #e5e7eb; padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px;">Add to cart</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>