Loading...
Back

#Quality Asym Images

showcase

Showcases quality through an asymmetrical layout of text and multiple, varied-sized images for visual interest.

Care of High Quality

Lorem ipsum dolor sit amet, consectetur adipis elit. Sit enim nec, proin faucibus nibh et sagittis a. Lacinia purus ac amet pellentesque aliquam enim.

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
  <div class="grid gap-4 lg:grid-cols-3">
    <div class="order-2 lg:order-1">
      <h5 class="mb-4 text-3xl font-bold lg:text-5xl">Care of High Quality</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipis elit. Sit enim nec, proin faucibus nibh et sagittis a. Lacinia purus ac amet pellentesque aliquam enim.</p>
    </div>
    <div class="order-1 lg:order-2">
      <div
        class="rounded-lg bg-gray-100"
        style="
          padding-top: calc(150% + 1rem);
          background-image: url('https://placehold.co/400x600/2563EB/FFFFFF');
          background-size: cover;
          background-position: center;
        "
      ></div>
    </div>
    <div class="order-3">
      <div class="grid grid-cols-1 gap-4">
        <div
          class="rounded-lg bg-gray-100"
          style="
            padding-top: 90%;
            background-image: url('https://placehold.co/400x300/2563EB/FFFFFF');
            background-size: cover;
            background-position: center;
          "
        ></div>
        <div
          class="rounded-lg bg-gray-100"
          style="
            padding-top: 60%;
            background-image: url('https://placehold.co/400x200/2563EB/FFFFFF');
            background-size: cover;
            background-position: center;
          "
        ></div>
      </div>
    </div>
  </div>
</section>
Care of High Quality

Lorem ipsum dolor sit amet, consectetur adipis elit. Sit enim nec, proin faucibus nibh et sagittis a. Lacinia purus ac amet pellentesque aliquam enim.

<section layout="container" space="m-x:auto m-y:large p-x:medium-3x tw-lg:m-y:big-3x tw-lg:p-x:big-3x">
  <div layout="grid tw-lg:grid-cols:3" space="g:medium">
    <div layout="order:2 tw-lg:order:1">
      <h5 space="m-b:medium" visual="text-size:grand font:tw-bold tw-lg:text-size:mount">Care of High Quality</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipis elit. Sit enim nec, proin faucibus nibh et sagittis a. Lacinia purus ac amet pellentesque aliquam enim.</p>
    </div>
    <div layout="order:1 tw-lg:order:2">
      <div
        visual="rounded:medium bg:gray-100"
        style="
          padding-top: calc(150% + 1rem);
          background-image: url('https://placehold.co/400x600/2563EB/FFFFFF');
          background-size: cover;
          background-position: center;
        "
      ></div>
    </div>
    <div layout="order:3">
      <div layout="grid grid-cols:1" space="g:medium">
        <div
          visual="rounded:medium bg:gray-100"
          style="
            padding-top: 90%;
            background-image: url('https://placehold.co/400x300/2563EB/FFFFFF');
            background-size: cover;
            background-position: center;
          "
        ></div>
        <div
          visual="rounded:medium bg:gray-100"
          style="
            padding-top: 60%;
            background-image: url('https://placehold.co/400x200/2563EB/FFFFFF');
            background-size: cover;
            background-position: center;
          "
        ></div>
      </div>
    </div>
  </div>
</section>