Layout Styles

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam finibus purus et porttitor sodales. Nam cursus ipsum neque. Nulla magna augue, vehicula nec interdum sed, tempus eu leo. Curabitur pharetra in lorem sit amet volutpat. Aenean gravida consectetur iaculis. Etiam consequat turpis turpis, ac efficitur turpis pulvinar vitae. Suspendisse finibus dolor eu augue dignissim, non volutpat nunc venenatis. Duis vel dolor pretium, aliquam ipsum at, malesuada sem. Aliquam massa augue, dignissim a nulla quis, rhoncus dictum felis.

Container Helpers

We've set thre kinds of containers useful in this Template. To horizontally center we use the margin utility class mx-auto.

<div class="conatiner_out mx-auto" />

<div class="conatiner mx-auto" />

<div class="conatiner_in mx-auto" />

Hero Image with Card

Using Containers and Cards, we could create a components similar to the ones shown in the Template homepage.

A modern Theme
for Designers.

We are CAREFALL & we create minimalist designs and branding.

<div class="container_out mx-auto relative">
  <img src="/images/showcase-img.jpg" alt="Demo"/>
  <div class="container mx-auto place-0 absolute flex items-center justify-center">
    <div class="card inline-block text-center shadow">
      …Card Content
    </div>
  </div>
</div>

In the example above we set a container_out wrapper to show the img full width. We have also a relative class because the card wrapper inside it will be positioned absolute and expanded to its limits with place-0 class. That wrapper has also a common max-width through container class, and organize its children as flex with vertically items-center and horizontally justify-center.
All those classes are composable and you could change based on the desired result. Take a look at the following examples where use another flex disribution attributes and use some responsive helpers.

Crafted with
responsive.

<div class="container_out mx-auto relative">
  <img class="pl-30p@md" src="image.jpg" alt="Demo"/>
  <div class="container mx-auto place-0 absolute flex items-center justify-center">
    <div class="card inline-block text-center shadow">
      …Card Content
    </div>
  </div>
</div>

Crafted with

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam finibus purus et porttitor sodales. Nam cursus ipsum neque.

responsive.

<div class="container_out mx-auto relative">
  <img class="pr-30p@md" src="image.jpg" alt="Demo"/>
  <div 
    class="container mx-auto place-0 absolute@sm grid items-center"
    style="--columns:1; --columns-sm:3"
  >
    <div class="card shadow">
      …Card Content
    </div>
    <div class="card shadow">
      …Card Content
    </div>
    <div class="card shadow">
      …Card Content
    </div>
  </div>
</div>

Grid Blocks

Using the Grid it is possible to compose blocks to obtain layout similar to those inside the Portfolio Item.

Left Box Text

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Post — Figure Caption dolor sit amet, consectetur adipiscing elit.

<div class="grid@md" style="--gap:6rem;">
  <div>
    <h1>Left Box Text</h1>
    <p>…</p>
  </div>
  <figure>
    <img src="img.jpg" alt="Post"/>
    <figcaption class="italic font-light mt-1 em-sm">
      <span class="text-dark">Figure Caption</span> dolor sit amet, consectetur adipiscing elit.
    </figcaption>
  </figure>
</div>

Right Box Centered

<div class="grid@md" style="--gap:6rem;">
  <figure>
    <img src="img.jpg" alt="Post"/>
    <figcaption class="italic font-light mt-1 em-sm">
      <span class="text-dark">Figure Caption</span> dolor sit amet, consectetur adipiscing elit.
    </figcaption>
  </figure>
  <div class="self-center">
    <h1>Left Box Text</h1>
    <p>…</p>
  </div>
</div>

1. Suspendisse ultricies tellus eget nisl molestie, quis sagittis mauris placerat.
2. Pellentesque et nulla pulvinar, bibendum quam ac, cursus turpis.
3. Sed quam odio, blandit sit amet dapibus id, aliquet sollicitudin enim.
4. Morbi hendrerit laoreet lectus a fringilla.
5. Sed quam odio, blandit sit amet dapibus id, aliquet sollicitudin enim.
6. Morbi hendrerit laoreet lectus a fringilla.

<ul class="grid@md list-none" style="--columns: 3; --gap: 2em;">
  <li class="pt-2">…</li>
  <li class="pt-2">…</li>
  <li class="pt-2">…</li>
  <li class="pt-2">…</li>
  <li class="pt-2">…</li>
  <li class="pt-2">…</li>
</ul>