Alternating Experiences
App Screenshot Previews
Award Showcase Grid
Bonus Content Grid
Course Card Grid
Course Offer Cards
Custom Section Benefits
Dual Product Cards
Filterable Portfolio
Offer Image Grid
Partners & Clients
Portfolio Reveal Grid
Quality Asym Images
STEM Learning Previews
Service Icon Grid
Specialty Icon Grid
Template Showcase Grid
Webinar Grid
#Quality Asym Images
showcaseShowcases 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>